如何使用基本的KO可观察数组来更新以选择选项下拉折叠的多个计算的可观察阵列

Question

我有一个可观察的数组，其可用项目绑定到网格行中的选择下拉框。用户可以在下拉下添加更多的行，并在其中选择其中的项目。

问题是在下拉行中选择一个项目后，除了选择该项目以外，它不应在其他下拉列表中可用。从数组中删除所选项目从所有其他下拉列表中删除它，也可以从选择下拉列表中删除它。

ex：如果最初包含的可用数组[a，b，c，d，e，f]

下拉1：selected = a ;可用[ a ，C，D，F]

下拉2：selected = b ;可用[ B ，C，D，F]

下拉3：selected = e ;可用[C，D， e ，f]

我正在尝试一种ko.com的方法，该方法基于可用ITEMS以及当前所选值返回数组。但是，我遇到了一些问题，可以计算出每个下拉列表。

粗糙的代码剪辑：

<table>
    <tbody data-bind='foreach: item'>
        <tr>
            <td>
                <select data-bind="
                    options: $root.availableItemsWithFilter,
                    event: { onchange: changedItem }">
                </select>
            </td>
        </tr>
    </tbody>
</table>
self.availableItemsFiltered = ko.computed(function () {
    var temp = self.availableItems();
    if (currentRowNumber == self.selectedRow()) {
        temp.push(self.selectedItem);
    }
    return temp;
});
self.changedItem = function(item) {
    if (self.selectedItem != '')
    {
        self.availableItems.remove(item);
    }
}

Answer 1

只是出于好奇心，并提醒自己敲除的工作方式，我解决了另一个解决方案。

http://jsfiddle.net/rainerpl/n01fvoaq/3/

和下面的代码

html

<div>

<select data-bind="optionsCaption: 'Choose...', options: $root.availableOptions.filter($element), optionsText: 'name', optionsValue: 'id', event: { change: changedItem($element)}">
</select>
<div data-bind="foreach: $root.selectedOptions().slice(1)">
    <select data-bind="optionsCaption: 'Choose...', options: $root.availableOptions.filter($element), optionsText: 'name', optionsValue: 'id', event: { change: $root.changedItem($element)}">
</select><br>
</div>
</div>

和javascript

window.model = new function() {
    var _model = this;
    this.availableOptions = ko.observableArray([
        {name: "option1", id: 1}, 
        {name: "option2", id: 2}, 
        {name: "option3", id: 3}, 
        {name: "option4", id: 4}, 
    ]);
        this.changedItem = function( item, val ) {
            var ind;
            if ( !item ) {return;}
            if ( item.previous_id ) {
            ind =  _model.selectedOptions().indexOf(item.previous_id);
        if (ind !== (-1) ) {_model.selectedOptions.splice(ind, 1);}
            }
            ind = _model.selectedOptions().indexOf(item.value);
            if ( ind == (-1) ) {_model.selectedOptions.push(item.value);}
            item.previous_id = item.value;
        }
        this.selectedOptions = ko.observableArray([]);
        _model.availableOptions.filter = function(elem) {
            return _model.availableOptions().filter(function(item) {
                var ind = _model.selectedOptions().indexOf(item.id.toString() );
                if ( elem.value == item.id ) {return true;}
                return ind == (-1);
            });
        };
}();
ko.applyBindings(model);