knockoutjs - 使用外部表单从网格编辑项目答案

【问题标题】：knockoutjs - Edit item from grid using external formknockoutjs - 使用外部表单从网格编辑项目
【发布时间】：2012-11-27 10:52:57
【问题描述】：

我正在尝试从网格中添加/加载记录，在网格之外对其进行编辑并更新 observablearray 和 UI。

演示：http://jsfiddle.net/DiegoVieira/ckMJE/98/

您会注意到，添加或编辑没有按预期工作。如果我添加一个新项目，它确实会添加到数组中并反映 UI，但下次我添加另一个项目时，旧项目会被添加到位。

数据是从服务器中提取的，它有大约 30 多个属性，因此构建对象时每个属性都为 ko.observable 不是一种选择。

例如

    $.get('api/objects', function (data) {
        self.stones(data.stones); // when the vm loads, this is empty
        self.stone(data.stone); // when the vm loads, this is empty
    });

提前致谢。

【问题讨论】：

data.stone 每次都是同一个对象（至少在示例中）
这个插件可能会有帮助：knockoutjs.com/documentation/plugins-mapping.html
#Andrew Whitaker 是的，我在看到 Niemeyer 代码后注意到了。
#subhaze 是的，我看到了插件，但我没有看到如何让它与我的生产代码一起工作。照原样，我认为它工作正常，我只是错过了删除/添加部分来更新数组。谢谢！

标签： knockout.js

【解决方案1】：

通常，您希望使属性可观察。

如果这是不可能的，那么一种选择是删除该项目并将其重新添加到数组中，以便实际重新渲染。

当您添加“模板”石头时，您会希望它是一个副本。 ko.toJS 是获取副本的快捷方式。

所以，你可以这样做：

self.addStone = function () {
    self.stonesArray.push(ko.toJS(self.stoneData));  
};

并保存如下：

self.saveStone = function (item) {
    var index = self.stonesArray.indexOf(item);
    self.stonesArray.remove(item);
    self.stonesArray.splice(index, 0, item);
    self.selectedStone(null);
};

示例：http://jsfiddle.net/rniemeyer/ckMJE/99/

【讨论】：

天哪，谢谢 Niemeyer，我非常感谢您所做的所有工作并告诉我我错过了哪里。