Question

我正在努力使用knockout.js selectedOptions绑定。

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

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

HTML code：

<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/

如何重现：

在多选字段中选择一个或多个项目，它们会显示在下面的列表中（“所选项目”）
删除其中一个所选项目
选择框已更新

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

Answer 1

回答我自己的问题：

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

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

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

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

knockout.js selectedOptions未更新

1 个答案: