Knockout.js 点击可观察更新
我在knockout js中遇到了一个问题,无法找到任何解决方案,我有一个对象列表,我将其放置在一个可观察的数组中,并将它们显示在一个表中,单击一行,在适当的字段中填充对象属性 当任何字段数据更新时,它会立即反映在表中,但我希望在单击“保存”按钮时,数据必须在表中更新,这样我也可以通过ajax更新数据库中的数据。 在以下位置创建一个简单的小提琴: Javascript如下所示:Knockout.js 点击可观察更新,knockout.js,Knockout.js,我在knockout js中遇到了一个问题,无法找到任何解决方案,我有一个对象列表,我将其放置在一个可观察的数组中,并将它们显示在一个表中,单击一行,在适当的字段中填充对象属性 当任何字段数据更新时,它会立即反映在表中,但我希望在单击“保存”按钮时,数据必须在表中更新,这样我也可以通过ajax更新数据库中的数据。 在以下位置创建一个简单的小提琴: Javascript如下所示: var myData = [{'Id':1,'UserName':'Imran',Active:true},{'Id'
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>
拯救
如有任何帮助,我们将不胜感激,请提前感谢更改:mainItem.UserName='ABC'代码>
作者:
mainItem.UserName('ABC')代码>
jshiddle:你应该阅读这些文章:@nemesv非常感谢这个链接,我已经浏览了第一个链接,但在搜索中找不到第二个链接,我正在经历它,我觉得它将解决我的问题。尽管我通过nemesv提供的第二个链接解决了问题,但由于您的答案正在解决我的问题,所以我将其标记为答案。