knockout.js - 为什么我不能删除绑定(bind)后添加的可观察对象？

Question

http://jsfiddle.net/scottbeeson/SRUKN/16/

单击左侧列表中的项目会将它们添加到右侧列表中。单击右侧列表中的项目应将其删除。它会删除第一个已经存在的项目，但不会删除添加的项目。我需要重新应用绑定(bind)还是什么？

ko.applyBindings(viewModel);

$('.result').on('click',function() {
    var item = ko.dataFor(this);
    viewModel.visibleItem.push(item);
});

$('.visibleItem').on('click',function() {
    var item = ko.dataFor(this);
    viewModel.visibleItem.remove(item);
});

Answer 1

您的点击处理程序只会附加到 DOM 中已经存在的元素。如果您想让它适用于动态添加的元素，您需要将处理程序附加到更高级别，该级别已经在 DOM 中并且不会更改(例如 document 或在您的情况下为 .top ):

$(document).on('click', '.visibleItem', function() {
    var item = ko.dataFor(this);
    console.log(item)
    viewModel.visibleItem.remove(item);
});

演示 JSFiddle.

但是 Knockout 的方式是让 Knockout 处理你的事件:

因此，在您的 View 模型上添加处理程序:

viewModel.removeVisible = function(item) {
    viewModel.visibleItem.remove(item);
}

并将其绑定(bind)在您的 View 中:

<div class="visibleItem" data-bind="click: $parent.removeVisible">
</div>

演示 JSFiddle.