Data binding 淘汰2路foreach绑定DOM更改更新模型

如果我在一个页面上有一个列表，并且它使用knockout的foreach绑定来显示列表项，那么其他东西会更新DOM以添加额外的列表项。如果有什么方法可以让knockout检测DOM更改并更新其模型以将新项添加到observableArray中

这是一把小提琴，它显示了问题

函数MyViewModel（）{
this.items=ko.array([
{name:'Alpha'}，{name:'Beta'}，{name:'Gamma'}，{name:'Delta'}
]);
this.simpleShuffle=函数（）{
this.items.sort（函数（）{
返回Math.random（）-0.5；//随机顺序
});
};
this.simpledd=函数（）{
$（“#顶部”）。追加（“
新项目”
”；
}
}
应用绑定（新的MyViewModel（））；

它有两个列表绑定到同一个ObservalArray，单击addItem按钮，您可以看到DOM被更新，在顶部列表中包含新的列表项，但是我希望第二个列表也被更新，都是通过模型更新的

似乎knockout忽略了它没有呈现的DOM元素，您可以通过单击shuffle按钮看到这一点，它将新项目保留在那里。我本以为它会删除它们并进行完整的重新渲染

请不要回答“只需将项目添加到observableArray”

请查看和第二个链接

---

我希望有帮助。

KO不支持此操作，因此“只需将项目添加到observableArray”。否则，您可能会编写一个自定义绑定处理程序来侦听DOM更改并填充可观察数组。。。。但我建议您“只需将该项添加到observableArray”我认为会是这样，我可能需要编写一个自定义绑定：-(

function MyViewModel() {
    this.items = ko.observableArray([
        { name: 'Alpha' }, { name: 'Beta' }, { name: 'Gamma' }, { name: 'Delta' }
    ]);

    this.simpleShuffle = function() {
        this.items.sort(function() {
            return Math.random() - 0.5; // Random order
        });
    };

    this.simpleAdd = function() {
         $("#top").append("<li>New item</li>");
    }
}

ko.applyBindings(new MyViewModel());

$('#top').bind('DOMNodeInserted DOMNodeRemoved', function () {
    alert('Changed');
});