我有一个淘汰赛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>
这是可能的还是最好的方法是什么?
答案 0 :(得分:0)
让每个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;
});
}