如何使用 Knockout javascript 进行高级搜索？

Question

我正在处理 MVVM 中的任务并使用 Knockout 和 Durandal 进行单页应用程序，但我是这个问题的新手，我需要进行高级搜索

问题是： 我有两个用 Infragistics 制作的组合框 首先是国家作为自动完成，它从数据库正确绑定（这是有效的）

<input id="iGCboxFromDest" data-bind="igCombo: {
dataSource: $root.countriesList,
text: countryID,
autoComplete: true,
showDropDownButton: false,
textKey: 'name',
valueKey: 'id',
width: 265,
mode: 'editable',
enableClearButton: false,
filteringType: 'local',
renderMatchItems: 'startsWith'
}" />

第二个城市，我需要根据国家/地区过滤它

，怎么做？

Answer 1

我已经修改了jsfiddle here，向它展示了如何使用您提到的组合框的两个选择输入来完成它的一个想法。

基本上，您需要将要过滤的内容的选定值绑定到可观察对象。在我的示例中，我有一组 Country 和一组城镇（或城市！），它们通过 CountryId 与 Country 建立关系。

countries = ko.observableArray([{"Id":1, "Name": England"}, //etc.]);
towns = ko.observableArray([{"CountryId":1,"Name":"London"},{"CountryId":2,"Name":"Glasgow"},{"CountryId":3,"Name":"Cardiff"},{"CountryId":4,"Name":"Belfast"}]);

并且选择的国家被绑定到一个 observable

selectedCountry = ko.observable();

然后，我将它们绑定到一个选择框

<select id="countries" data-bind="value: selectedCountry, options: countries, optionsText: 'Name', optionsValue: 'Id',  optionsCaption: 'Countries'"></select>

现在我们必须按 countryId 过滤城镇

filteredTowns = ko.computed(function() {
   return ko.utils.arrayFilter(self.towns(), function(item) {
        return item.CountryId === self.selectedCountry();
    });  
});

第二个选择框，绑定到过滤后的城镇现在应该显示与该城市相关的城镇。

<select id="towns" data-bind="value: selectedTown, options: filteredTowns, optionsText: 'Name', optionsValue: 'CountryId',  optionsCaption: 'towns'"></select>