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;
  });
}

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

1 个答案: