knockoutjs - 동일한 selectedOptions/value observableArray를 사용하는 여러 개의 드롭 다운

Question

단일 선택과 다중 선택 둘 다의 다중 드롭 다운을 생성하는 knockout foreach 바인딩이 있습니다. 나는 거기에 얼마나 많은 드롭 다운이있을 지 미리 알지 못한다.

모든 드롭 다운은 동일한 데이터 유형의 항목으로 채워지지만 필터링되지만 하나의 observableArray에서 모든 드롭 다운의 모든 선택된 항목을 수집하려고합니다. foreach 루프의 모든 드롭 다운에 동일한 observableArray를 바인딩하면 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

은 현재 이상 반복하고있는 항목에 포함 된 그 선택된 값에 대해 다른 observableArray 각 select 바인딩을 가지고, 다음 함께 모두 가져 루트 수준에서 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; 
    }); 
}