Question

我在knockout js中遇到一个问题而无法找到任何解决方案，我有一个对象列表，我将它放在一个可观察的数组中并将它们显示在一个表中，单击一行，填充适当字段中的对象属性。

当更新任何字段数据时，它会立即反映在表中，但我希望比单击“保存”按钮时更新，而不是必须在表中更新数据，这样我才能通过ajax更新数据库中的数据。在jsfiddle

创建了一个简单的小提琴

Javascript如下：

var myData = [{'Id':1,'UserName':'Imran',Active:true},{'Id':2,'UserName':'Khan',Active:false},{'Id':3,'UserName':'Balouch',Active:true}];
function User(id,name,active)
{
   this.Id = ko.observable(id);   
   this.UserName = ko.observable(name);
   this.Active = ko.observable(active);
}
var viewModel = function () {
   var self = this;

   self.AllUsers = ko.observableArray([]);
   self.CurrentUser = ko.observable(new User(-1,'',false));

   var mappedUsers = $.map(myData, function (item) {
       return new User(item.Id, item.UserName, item.Active);
   });

   self.AllUsers(mappedUsers);

   self.GetUser = function(item)
   {
       ko.utils.arrayForEach(self.AllUsers(), function (mainItem) {
           if (item.Id == mainItem.Id)
               self.CurrentUser(mainItem);
       });
   };

   // I want this function to update the table and also send Ajax call.
   self.UpdateRecord = function()
   {
       //ko.utils.arrayForEach(self.AllUsers(), function (mainItem) {
       //    if (self.CurrentUser().Id() == mainItem.Id())
       //        mainItem.UserName = self.CurrentUser().UserName();
       //});
   };
};
$(function () {
        ko.applyBindings(new viewModel());
    });

，html如下：

<table style="width:100%;">
<tbody data-bind="foreach:AllUsers">
    <tr data-bind="click:$root.GetUser">
        <td data-bind="text:Id"></td>
        <td data-bind="text:UserName"></td>
        <td data-bind="text:Active"></td>
    </tr>
</tbody>
</table>
<br/>
<input type="text" data-bind="value:CurrentUser().UserName"/>
<br/>
<button data-bind="click:UpdateRecord">Save</button>

任何帮助将不胜感激，提前感谢

Answer 1

变化：
mainItem.UserName = 'ABC';
按：
mainItem.UserName('ABC');

jsfiddle：http://jsfiddle.net/R5yNM/5/

单击更新可观察

1 个答案: