2013-09-25 79 views
0

试图在Knockout和CodeIgniter中显示来自MySQL数据库的所有用户。我从服务器得到一个json响应,但是Knockout没有显示Json数据。Knockout映射不更新self.users

我不断收到:

Uncaught ReferenceError: Unable to parse bindings. Bindings value: text: id Message: id is not defined

HTML:

<!-- Users --> 
<table class="table table-condensed table-striped table-bordered table-hover"> 
    <thead> 
     <tr><th>User Id</th><th>Name</th><th>Email</th><th>Role</th></tr> 
    </thead> 
    <tbody data-bind="foreach: users"> 
     <tr> 
      <td data-bind="text: id"></td> 
      <td><input data-bind="value: name" /></td> 
      <td><input data-bind="value: email"/></td> 
      <td><select data-bind="options: $root.roles, value: role, optionsText: 'role', optionsValue: 'role'"></select></td> 
      <td><a href="#" data-bind="click: $root.removeUser" class='icon-remove'></a></td> 
     </tr>   
     </tr> 
    </tbody> 
</table> 


<pre data-bind="text: ko.toJSON($data, null, 2)"></pre> 

淘汰赛:

<script type="text/javascript"> 
    function User(data) { 
     this.name = ko.observable(data.name); 
     this.email = ko.observable(data.email); 
     this.id = ko.observable(data.id); 
     this.role = ko.observaveble(data.role); 
    } 

    function UserListViewModel(data) { 
     // Data 
     var self = this; 
     self.users = ko.observableArray([]); 


     // Operations 
     self.addTask = function() { 
      self.tasks.push(new Task({title: this.newTaskText()})); 
      self.newTaskText(""); 
     }; 
     self.removeTask = function(task) { 
      self.tasks.remove(task) 
     }; 

     // Load initial state from server, convert it to Task instances, then populate self.tasks 
     $.get("/sws/users/index", function(data) { 
      var mappedUsers = ko.mapping.fromJSON(allData); 
      self.users(mappedUsers); 
     }); 
    } 

    ko.applyBindings(new UserListViewModel()); 
</script> 

JSON:

{"users":[{"id":"1","email":"[email protected]","password":"tacos","permissions":null,"activated":"1","activation_code":null,"activated_at":"2013-09-23 20:19:42","last_login":"2013-09-23 20:19:42","persist_code":null,"reset_password_code":null,"name":"Chris","created_at":"2013-09-23 04:17:24","updated_at":"2013-09-23 07:16:23"}]} 

回答

1

您正在将allData作为参数传递给映射,但它没有在任何地方定义。你想data.users代替(data因为那时ko.mapping.fromJSON会返回一个对象,具有一个键,users,其价值将是一个observableArray,你会迷惑淘汰赛,如果你尝试使用对象的另一observableArray值,即self.users )。

0

切换到此.ajax调用似乎可以解决问题。

// Load initial state from server, convert it to User instances, then populate self.users 
    $.ajax({ 
     url: '/sws/users/index', 
     dataType: 'json', 
     type: 'POST', 
     success: function (data) { 
      self.users(data['users']); 
      console.log(data['users']); 
     } 
    });