knockout.js - 如何使用 knockout 映射克隆和重新绑定(bind)我的数据？

Question

我需要将一些数据从 ViewModel 中的主源克隆到对话框中。原因是用户可以取消对话框，我不希望 master 反射(reflect)那些取消的更改。

我在对话框中创建了主数据的克隆副本，并将数据绑定(bind)设置为获取“localEdited.*”属性。如果用户单击“确定”，然后我会尝试将数据保存回主服务器(如果已编辑)，否则如果有新数据则推送数据。

   editItem: function(data) { 
            // clone a temporary copy for the dialog                    
            this.localEdited = ko.mapping.fromJS(ko.toJS(data));               
            $("#dlgAdd").dialog("open");
        },

以上内容目前有效，但是如果我单击母版中的另一个项目，对话框不会显示更新的值。好像 ko.mapping.fromJS 只工作一次，然后就再也不会工作了。它总是选择第一个值。我该如何解决这个问题？我觉得我需要重新绑定(bind)值，但 KO 的重点是不必这样做。

我如何将数据持久保存回父级。我想我可能遇到与上述相同的问题。

顺便说一句，我正在使用 KnockoutJS 1.2.1。

Answer 1

localEdited 需要是可观察的，你应该在 editItem 函数中执行 this.localEdited(ko.mapping.fromJS(ko.toJS(data))) 来制作每次调用 editItem 时，knockout 都会重新绑定(bind)您的对话框。对话框中的数据绑定(bind)需要更改为 localEdited()。*

您可以在 localEdited 不可见的情况下逃脱，但在这种情况下，您需要手动更新 editItem 中 localEdited 的每个可观察属性功能。所以你必须有类似的东西

this.localEdited.property1(data.property1());
this.localEdited.property2(data.property2());

重点是您需要使用函数调用语法更新可观察对象。这样 knockout 将捕获更新并通过绑定(bind)传播它。在您的初始代码中，您只需对 localEdited 进行简单赋值，因此 knockout 没有钩子(Hook)来拦截并发挥其魔力。

更新:事实证明 ko.mapping 插件可以自动更新模型中的单个可观察对象，因此您不必手动执行:

ko.mapping.fromJS(ko.toJS(data), this.localEdited);