Knockout js映射插件不起作用

Question

我正在开发淘汰赛 js 框架，并使用映射插件来更新视图模型，其中包含先前保存的数据，如下面的小提琴中所述。

HTML：

<a href="#" onclick="outputJson();">Click here for output Json</a>
<a href="#" onclick="reloadData();">Click here to load old data</a>
</br>
<input type="text" data-bind="value:firstName" />
<input type="text" data-bind="value:lastName" />
<span data-bind="text:fullName"></span>

Javascript：

     var updatedData = [];
            var viewModel = {
                myviewmodel: ko.observable().extend({noitfy:'always'})
            };
            function appViewModel() {
                var self = this;
                self.firstName = ko.observable('Bob');
                self.lastName = ko.observable('Smith');
                self.fullName = ko.computed(function () {
                    return self.firstName() + " " + self.lastName();
                });
            }
            viewModel.myviewmodel(new appViewModel());

            $(function () {
                ko.applyBindings(viewModel.myviewmodel);
            });
            function outputJson() {
               var unmapped = ko.mapping.toJS(viewModel.myviewmodel);
               updatedData.push(unmapped);
               viewModel.myviewmodel(new appViewModel());
            }
            function reloadData() {
                viewModel.myviewmodel(ko.mapping.fromJS(updatedData[0]));
            }

JS Fiddle

但每当我使用 unmap 选项时，使用 ko.mapping 插件的视图模型计算的 observable 不会更新。

场景是。 1. 给出名字 = 'Bob123'，姓氏 = 'Smith' 2.现在点击“Click here for output Json”按钮，数据将被临时保存 3. 单击“单击此处加载旧数据”现在我们可以获取旧数据 firstname='Bob123',lastname='Smith'，但是当我更改这些字段中的任何一个名字或姓氏时，它不会更新全名。

谁能告诉我如何使计算域在 unmap 上工作？

Answer 1

您遇到此问题的原因是您的视图模型绑定到可观察值的特定实例。名字、姓氏等

因此，当您重新加载数据时，我建议进行以下更改：

viewModel.myviewmodel.firstName(updatedData[0].firstName);

viewModel.myviewmodel.firstName(updatedData[0].lastName);

通过这种方式，您不会创建视图绑定到的对象的新实例。

如果您从内存中删除对象，则绑定不再有效。

您可以为您的特定 div 再次 cleanNode 和 applyBindings，我还没有真正使用过。这将允许您将 viewModel 重新绑定到新数据。如果绑定发生变化，这会变得非常不灵活。

如果你有大量的值要更新，我最好的建议是使用 javascript 的关联数组属性，如下所示：

for (var prop in updatedData[0]) {
    viewModel.myviewmodel[prop](updatedData[0][prop]);
}