knockout.js - knockoutjs 在编辑后更新了表格

Question

更新完成后如何更新表。这是我的示例代码。如果单击更新，则表不会更新。

 self.updateCategory = function(category){
        var r = confirm("Are you sure you want to update this category " + self.ID() + "?");
        if(r==true){
            //code here?
        }
    };

http://jsfiddle.net/comfreakph/2TrjF/3/

Answer 1

它没有更新，因为您没有代码:-)

self.updateCategory = function(category) {
   var r = confirm("Are you sure you want to update this category " + self.ID() + "?");
   if(r == true) {
      // Code here?
   }
};

如果您问如何，那么在“// Code here”部分中，您需要从您保存的 ID 中找到数组中的类别，然后从 self.Name 和 self.Remarks 属性中设置其属性。

Answer 2

这是一个粗略的解决方案，但似乎可行> 我尝试根据 ID 查找原始元素，然后用从数据创建的新元素替换。
我相信有更有效的方法可以找到原始数据，但想法是您可以对可观察数组进行替换。

self.updateCategory = function (category) {
    var r = confirm("Are you sure you want to update this category " + self.ID() + "?");
    if (r == true) {
        var index = -1; 
        $.each(self.Categories(), function (i, item) {
            if (this.ID === category.ID()) {
                index = i;
            }
        });
        var original = self.Categories()[index];
        console.log(original.CreatedAt);
        category.Name = self.Name();
        category.Remarks = self.Remarks();
        category.CreatedAt = original.CreatedAt;

        self.Categories.replace(original, category);
        self.Name("");
        self.Remarks("");
        self.isSelected(true);
        }
    };

检查这个小提琴：http: //jsfiddle.net/2TrjF/5/

Answer 3

您需要做几件事。首先，使用淘汰映射插件，然后使用该插件设置 Categories 属性：

self.Categories = ko.mapping.fromJS(category);

您的代码使数组可观察，但不是其中的每个项目。通过使用映射插件，您可以使每个类别及其所有属性都可观察。

然后您需要更新您的更新函数以获取原始类别并更新其上的值：

self.updateCategory = function (category) {
    var r = confirm("Are you sure you want to update this category " + self.ID() + "?");
    if (r == true) {
    var original = ko.utils.arrayFirst(self.Categories(), function (item)
    {
        return category.ID() == item.ID();
    });
        console.log(original.CreatedAt());
        original.Name(self.Name());
        original.Remarks(self.Remarks());

        self.Name("");
        self.Remarks("");
        self.isSelected(true);
        }
    };

您应该会发现，当您更改值时，表中的行会自动更新。

jsFiddle 可用。