Как передать аргумент из опций выбора для запуска и фильтрации наблюдаемых массивов с использованием привязки foreach

Question

В разметке ниже я связываю уникальные данные, содержащие список Континент: Я также подписываюсь на выбранное значение и запускаю событие с континентом, выбранным пользователем.

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

С подписываться вы создаете новый вычисленный наблюдаемый каждый время изменения выбора и переназначенные вычисленные наблюдаемые объекты никогда не привязаны к DOM.

Вы можете проверить рабочую демонстрацию в этом fiddle.

Answer 2

Вы можете использовать бесплатный плагин Knockout Projections, доступный здесь; knockout-projections.

Определения отфильтрованного массива наблюдаемым очень просто, а реализация является высокоэффективной:

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