如何使用 foreach 绑定从 select 选项传递参数以触发和过滤数组可观察对象

Question

在下面的标记中，我绑定了包含 Continents 列表的唯一数据：我还订阅了 selected 值并使用大洲 select 由用户编辑。

<div id="country-collection">
    <select data-bind="options: UniqueContinent,
    value: SelectedContinent"></select>
</div>

代码：

    self.CountryData = ko.observableArray([]);
    self.SelectedContinent = ko.observable('');

    self.UniqueContinent = ko.dependentObservable(function() {
        var continent = ko.utils.arrayMap(self.CountryData(),

            function(item){

                return item.Continent
            })

        return ko.utils.arrayGetDistinctValues(continent).sort();
    });

每次生成 selection 时都会触发以下函数：

    self.SelectedContinent.subscribe(function (selectedValue) {
      // alert(selectedValue);
    });

使用上面的代码，我需要使用基于默认大陆 onload 或 selected 大陆的所有国家/地区填充以下列表：因此，如果亚洲是 selected，显示的唯一国家是亚洲国家及其各自的详细信息。

<div id="country-list">
    <ul data-bind= "foreach: CountryData">
        <li><span data-bind="text: Country"></span></li>
        // More list stuff here (removed for brevity)
    </ul>
</div>

我试过了，但只有在值被硬编码时它才有效。我需要根据默认值或 select 选项的 selected 值加载国家/地区：

    self.SelectedContinent.subscribe(function (selectedValue) {

        // Call this function when changes are made
        self.FilteredEntries = ko.computed(function() {

            return ko.utils.arrayFilter(self.CountryData(), function(item) {
                // I need to use the selected value
                return item.Continent === 'SOUTH AMERICA';
        });
    });
});

Answer 1

您可以取消订阅功能：

    // Call this function when changes are made
    self.FilteredEntries = ko.computed(function() {

        return ko.utils.arrayFilter(self.CountryData(), function(item) {
            // I need to use the selected value
            return item.Continent === self.SelectedContinent();
        });
    });

使用订阅，每次选择更改时，您都会创建一个新的计算可观察对象，并且重新分配的计算可观察对象永远不会绑定到 DOM。

您可以在 fiddle 中查看工作演示。

Answer 2

您可以使用 awsome Knockout Projections plugin, available here; knockout-projections。

定义过滤后的数组observable非常简单，实现效率很高：

var FilteredCountries = self.CountryData().filter(
   function(c) { return c.Continent === self.SelectedContinent(); 
});

如何使用 foreach 绑定从 select 选项传递参数以触发和过滤数组可观察对象

How to pass an argument from select options to trigger and filter array observables using foreach binding

javascript

jquery

knockout-2.0

knockout.js