javascript - KnockoutJS selectedOptions 未显示

Question

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

案例:

• View 模型有 form.products.all 和 form.products.selected observable。这两个都是由 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 绑定(bind)按设计工作。

您的错误很可能是您的选择 observable 不包含相同对象(即，对中对象的引用 all)，但仅仅是具有相同属性值的对象。

Knockout 通过对象标识维护绑定(bind)，它不进行任何其他比较。

考虑这个简单的例子:

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>

---

不相关的旁注:尽量避免在绑定(bind)属性中定义函数。它丑陋、低效、可能重复而且不是很惯用。在 View 模型上创建相应的属性，例如:

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>