knockout.js - 淘汰赛中的嵌套依赖项

Question

我希望在下拉列表更改时更改集合。我在模型中有太多数组：

function Model(data) {

        this.Stuff = data.Stuff;
        this.Filter = data.Filter;
        this.SelectedFilterOption = ko.observalbe();
}

html是这样的：

<select data-bind="options: Filter, optionsText: 'Name', value: SelectedFilterOption"></select>
<div data-bind="foreach: Stuff">
<label data-bind="text: Name"></label><br/>
</div>

我想要实现的是，当用户更改数组时select，stuff应该使用选择的值更新和过滤数组。

我该怎么做呢？

Answer 1

我建议在模型中添加一个计算值，返回过滤后的数组，数组将根据选择的当前值进行过滤。

function Model () {
     ....
    this.FilteredStuff = ko.computed(function () {
        return ko.utils.arrayFilter(self.Stuff(), function(item) { return item == self.SelectedFilterOption () } );    
    });  
}

<div data-bind="foreach: FilteredStuff">
    <label data-bind="text: $data"></label><br/>
</div>

一个工作小提琴