KnockoutJS selectedOptions 未显示

Question

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

案例：

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

HTML形式有多个select形式：

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

HTML 表格正确显示了所有选项。
HTML 表单不显示加载时的 selected 选项。特别是，如果我检查 viewModel 对象，我可以看到正确的对象在加载时加载到 products.selected 数组中。但是 multi-select 不会自动 select 它们。
如果我 select 表单中的对象然后检查 products.selected 可观察对象，我 do 会看到数组中的对象.
如果我 post 表单，正确的对象最终会出现在数据库中，然后在下一页加载时出现在 viewModel 对象中（因此唯一缺少的部分循环实际上是根据 products.selected.

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

Answer 1

selectedOptions 绑定按设计工作。

你的错误很可能是你的 selected observable 不包含 identical 对象（即 references 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>

KnockoutJS selectedOptions 未显示

KnockoutJS selectedOptions not showing up

html

javascript

knockout.js