javascript - 如何使用 foreach 绑定(bind)从选择选项传递参数以触发和过滤数组可观察对象

Question

在下面的标记中，我绑定(bind)了包含大陆列表的唯一数据:我还订阅了选定的值并触发了用户选择的大陆的事件。

<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();
    });

每次进行选择时都会触发以下函数:

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

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

<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>

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

    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();
        });
    });

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

您可以在这个 fiddle 中查看工作演示.