knockout.js selectedOptions 未更新

Question

我在为 knockout.js selectedOptions 绑定而苦苦挣扎。

我用 observableArray A 中的项目填充多选，选择一些，将结果存储在 observableArray B 中。当项目从数组 A 中删除时，B 数组不会更新。

这是淘汰赛问题还是我做错了什么？

HTML 代码：

<h4>All items:</h4>
<div data-bind="foreach: items">
    <p data-bind="text: name"></p>
    <button data-bind="click: $parent.remove">Remove item</button>
</div>

<select multiple="multiple" data-bind="
    options: items,
    selectedOptions: selectedItems,
    optionsText: 'name',
    optionsCaption: 'Choose one or more...'
"></select>

<h4>Selected items:</h4>
<div data-bind="foreach: selectedItems">
    <p data-bind="text: name"></p>
</div>

Javascript：

var viewModel = {
    items: ko.observableArray([
        { name: "Item 1", id: "1" },
        { name: "Item 2", id: "2" },
        { name: "Item 3", id: "3" }
    ]),
    selectedItems: ko.observableArray(),
    remove: function(item) {
        viewModel.items.remove(item);
    }
}

ko.applyBindings(viewModel);

这是小提琴：http://jsfiddle.net/3FYAe/

如何重现：

1. 在多选字段中选择一个或多个项目，它们会出现在下面的列表中（“所选项目”）

2. 删除其中一项

3. 选择框已更新

   4.

   • 预期：“所选项目”已更新
   • 实际：“所选项目”保留已删除的值

Answer 1

回答我自己的问题：

简单的解决方案是也从 selectedItems 数组中删除该项目，即。 e.

remove: function(item) {
    viewModel.items.remove(item);
    viewModel.selectedItems.remove(item);
}

更新小提琴：http://jsfiddle.net/3FYAe/1/

但是，我想找到一个更好的解决方案，因为我要处理更多的列表和更多的依赖项；这只是一个简化的例子。