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，以便在你提到组合框时使用两个选择输入来说明如何使用它。

基本上，您需要将要尝试过滤的选定值绑定到observable。在我的例子中，我有一系列国家和一组城镇（或城市！），它们与CountryId的国家有关系。

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"}]);

并且所选国家/地区绑定了可观察的

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>

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

1 个答案: