knockoutjs - 具有相同 selectedOptions/value observableArray 的多个下拉列表

Question

我有一个淘汰赛 foreach 绑定，可以生成多个下拉列表，包括单选和多选。我不知道会有多少下拉菜单。

所有下拉列表都填充了相同数据类型但已过滤的项目，但是我想从一个 observableArray 中的所有下拉列表中收集所有选定的项目。将相同的 observableArray 绑定到 foreach 循环中的所有下拉列表不起作用，因为它被添加到 observableArray 并立即被其他下拉列表删除。

<script id="multiselect" type="text/html">
    <select class="multi-select" multiple="multiple" data-bind="options: Items, optionsText: 'Name', optionsValue: 'Guid', selectedOptions: $root.selectedItems"></select>
</script>
<script id="singleselect" type="text/html">
    <select class="single-select" data-bind="options: Items, value: $root.selectedItems"></select>
</script>

<div class="separator">
    <!-- ko foreach: distinctItemTypes -->
    <label data-bind="text: ItemType.Name"></label>
    <div>
        <!-- ko template: { name: Count > 1 ? 'multiselect' : 'singleselect' } --><!-- /ko -->
    </div>
    <!-- /ko -->
</div>

这可能吗？或者最好的方法是什么？

Answer 1

将每个 select 绑定到不同的 observableArray 以获取包含在您当前循环的项目中的选定值，然后在根级别添加 computed observable 以将它们全部组合在一起：

var distinctItemType = function() {
  this.selectedOptions = ko.observableArray();
}

var vm = function() {
  var self = this;

  this.distinctItemTypes = ko.observableArray();

  this.allSelectedOptions = ko.computed(function() {
    var ret = [];
    for (var x = 0; x < self.distinctItemTypes().length; x++)
      ret = ret.concat(self.distinctItemTypes()[x].selectedOptions());

    return ret;
  });
}