Knockoutjs 嵌套视图模型更新答案

【问题标题】：Knockoutjs nested view model updatesKnockoutjs 嵌套视图模型更新
【发布时间】：2013-02-06 13:09:48
【问题描述】：

我试图了解如何使用列出一些项目的小小提琴来嵌套 knockoutjs 视图模型，然后单击按钮，它会显示该项目的详细信息。然后，我有一个按钮，通过向每个项目添加 15 来更新每个项目的 Id 属性，但出于某种原因，它们最终具有相同的值。有人能启发我吗？

谢谢！

The fiddle in question

【问题讨论】：

标签： mvvm knockout.js nested viewmodel

【解决方案1】：

这是您的 .Name 计算属性。 Id 更改工作正常。

http://fiddle.jshell.net/Y3JXD/1/

闭包中的item 始终是第一次执行后列表中的最后一个item。请记住，每当可观察到的变化时，计算值都会更新。因此，在安装过程中的第一次，它运行良好，因为 item 是循环中的 item。但是，闭包中捕获的只是 item（第 15 项），而不是针对该特定循环实例的项。

更新：忘记了要按照评论中的建议计算的第二个参数。

http://fiddle.jshell.net/Y3JXD/1/

item.Name = ko.computed(function () { return 'Item_' + item.Id(); }, item);

这是另一种将引用包装在闭包中的技术，并捕获正确的 item 实例（仅作为捕获正确范围所需的演示）。

self.loadItems = function () {
    for (var i = 0; i < 15; i++) {
        var item = ko.mapping.fromJS({
            Id: i
        });
        self.items.push(item);
        (function (item) {
            item.Name = ko.computed(function () {
                return 'Item_' + item.Id();
            });
        })(item);
    }
};

【讨论】：

有一个更简单的 sysntax：item.Name = ko.computed(function () { return 'Item_' + this.Id(); },item);，您可以将第二个参数传递给 ko.computed，它会将 this 包含在计算中。
天啊！好点子。我完全忘记了这一点。有些日子有太多的 JS 库和太多的技术！ :)

【解决方案2】：

您能否将Name 属性移至itemModel？

self.Name = ko.computed(function() { 
    return 'Item_' + self.Id();
});

在创建对象而不是在使用对象时设置它似乎很奇怪。

【讨论】：

到itemModel。我会用我的答案中的代码替换你小提琴的第 41 行