KnockoutJS selectedOptions 未显示

Question

我正在使用 KnockoutJS 来管理我的 Web 前端。我正在编写一个 CRUD/Admin 站点，但我遇到了 selectedOptions 绑定问题。

案例：

• 视图模型具有form.products.all 和form.products.selected 可观察对象。这两个都是ko.mapping生成的。

• HTML 表单具有表单的多选：

  <select required="" multiple="" data-bind="options: products.all, optionsText: function (item) { return item.value.name.unName(); }, selectedOptions: products.selected" class="form-control">
  

• HTML 表单正确显示所有选项。

• HTML 表单不在加载时显示选定的选项。特别是，如果我检查 viewModel 对象，我可以看到正确的对象在加载时被加载到 products.selected 数组中。但是多选不会自动选择它们。

• 如果我选择表单中的对象，然后检查 products.selected 可观察对象，我确实会看到数组中的对象。

• 如果我发布表单，正确的对象最终会出现在数据库中，然后在下一页加载时出现在 viewModel 对象中（因此循环中唯一缺少的部分实际上是基于products.selected 中的内容。

我做错了什么？我看到了相互矛盾的建议，其中一些已经过时，所以我不确定如何继续。

Answer 1

selectedOptions 绑定按设计工作。

您的错误很可能是您的 selected observable 不包含 相同 对象（即，对all 中对象的引用），而只是对象具有相同的属性值。

Knockout 通过对象标识维护绑定，不做任何其他比较。

考虑这个简单的例子：

var vm = {
    products: {
        selected: ko.observableArray(),
        all: ko.observableArray([
            {
                value: {
                    name: {
                        unName: ko.observable("Foo")
                    }
                }
            }, {
                value: {
                    name: {
                        unName: ko.observable("Bar")
                    }
                }
            }
        ])
    }
};
vm.products.selected.push(vm.products.all()[1]);
ko.applyBindings(vm);

pre {
  font-size: small;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.0.0/knockout-min.js"></script>

<select required="" multiple="" class="form-control" data-bind="
    options: products.all, 
    optionsText: function (item) { 
        return item.value.name.unName(); 
    }, 
    selectedOptions: products.selected
"></select>

<pre data-bind="text: ko.toJSON($root, null, 2)"></pre>

---

不相关的旁注：尽量避免在绑定属性中定义函数。它丑陋，效率低下，可能重复并且不是很惯用。在视图模型上做一个对应的属性，比如这样：

function Product(data) {
    ko.utils.extend(this, data);
    this.displayName = this.value.name.unName;
}

和

<div data-bind="with: products">
    <select required="" multiple="" class="form-control" data-bind="
        options: all, 
        optionsText: 'displayName', 
        selectedOptions: selected
    "></select>
</div>