敲除映射 - 使用键唯一标识嵌套对象

Question

The Knockout mapping plugin documentation 有一节题为“使用“键”唯一标识对象”。这描述了如何更新对象的一部分，然后仅更新显示的该部分，而不是完全替换部分修改对象的所有属性的显示。在他们的简单示例中，这一切都非常出色，我在这里对其进行了轻微修改，以使我的问题更清楚。我的修改是：

1. 延迟 2 秒后用更正名称替换对象。

2. 突出显示显示中不变的部分，这样你就可以看到更新发生时它实际上并没有被替换。

1.简单对象 (jsFiddle)

<h1 data-bind="text: name"></h1>
<ul data-bind="foreach: children">
    <li><span class="id" data-bind="text: id"></span> <span data-bind="text: name"></span></li>
</ul>

<script>
var data = {
    name: 'Scot',
    children: [
        {id : 1, name : 'Alicw'}
    ]
};
var mapping = {
    children: {
        key: function(data) {
            console.log(data);
            return ko.utils.unwrapObservable(data.id);
        }
    }
};
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);

var range = document.createRange();
range.selectNode(document.getElementsByClassName("id")[0]);
window.getSelection().addRange(range);

setTimeout(function () {
    var data = {
        name: 'Scott',
        children: [
            {id : 1, name : 'Alice'}
        ]
    };
    ko.mapping.fromJS(data, viewModel);
}, 2000);
</script>

但我不清楚如何为更复杂的嵌套数据结构实现相同的行为。在下面的示例中，我采用了上面的代码并将数据包装在一个列表中。我希望它的行为与上述相同，但事实并非如此。由于一个属性的变化，整个显示被重做。您可以看到这一点，因为与上面的示例不同，数据更新后突出显示会丢失。

2。更复杂的嵌套对象 (jsFiddle)

<!-- ko foreach: parents -->
    <h1 data-bind="text: name"></h1>
    <ul data-bind="foreach: children">
        <li><span class="id" data-bind="text: id"></span> <span data-bind="text: name"></span></li>
    </ul>
<!-- /ko -->

<script>
var data = {
    parents: [
        {
            name: 'Scot',
            children: [
                {id : 1, name : 'Alicw'}
            ]
        }
    ]
};
var mapping = {
    children: {
        key: function(data) {
            console.log(data);
            return ko.utils.unwrapObservable(data.id);
        }
    }
};
var viewModel = ko.mapping.fromJS(data, mapping);
ko.applyBindings(viewModel);

var range = document.createRange();
range.selectNode(document.getElementsByClassName("id")[0]);
window.getSelection().addRange(range);

setTimeout(function () {
    var data = {
        parents: [
            {
                name: 'Scott',
                children: [
                    {id : 1, name : 'Alice'}
                ]
            }
        ]
    };
    ko.mapping.fromJS(data, viewModel);
}, 2000);
</script>

所以基本上我要问的是，考虑到更多嵌套的数据结构，我怎样才能使第二个示例像第一个示例一样工作？您可以假设每个孩子的 id 都是唯一的（因此，如果我在 Scott 之外添加另一个父母，他的孩子将以 id=2 开头，等等）。

Answer 1

那里的观察很有趣，写得很好。如果您在父级和子级上定义一个键，它似乎可以工作。试试这个小提琴：

http://jsfiddle.net/8QJe7/6/

它为父级和子级定义了可实例化的视图模型函数，父构造函数在其中进行子映射。