2

我有一个启用了多项选择的选择菜单。

<select id="regions" data-placeholder="Choose a Region..." multiple style="height: 35px;" data-bind="options: availableRegions,selectedOptions: selectedRegions,optionsText: 'name',optionsValue: 'value',event: { change: filterResellersByRegion }"></select>

我已将选择绑定到 json 数组。在选择上设置数据绑定时，我将 observableArray 连接到 selectedOptions 属性。这是我的视图模型：

function ResellersViewModel() {
var self = this;

self.availableRegions = ko.observableArray([{
    'name': 'United States',
        'value': 'united-states'
}, {
    'name': 'Canada',
        'value': 'canada'
}, {
    'name': 'Latin America &amp; the Caribbean',
        'value': 'latin-america-caribbean'
}, {
    'name': 'Europe, Middle East &amp; Africa',
        'value': 'europe-middle-east-africa'
}, {
    'name': 'Asia-Pacific &amp; Japan',
        'value': 'asia-pacific-japan'
}, {
    'name': 'China &amp; North Asia',
        'value': 'china-north-asia'
}]);

self.resellers = [{
    'name': '2S',
        'url': 'http://www.2s.com.br/',
        'urlText': 'www.2s.com.br',
        'status': 'gold',
        'city': '',
        'regions': ['latin-america-caribbean']
}, {
    'name': 'Abacus Solutions LLC',
        'url': 'http://www.abacusllc.com/',
        'urlText': 'www.abacusllc.com',
        'status': 'gold',
        'city': '',
        'regions': ['united-states']
}, {
    'name': 'Accunet Solutions, Inc.',
        'url': 'http://www.accunetsolutions.com/',
        'urlText': 'www.accunetsolutions.com',
        'status': 'platinum',
        'city': '',
        'regions': ['united-states']
}, {
    'name': 'Accuvant',
        'url': 'http://www.accuvant.com/',
        'urlText': 'www.accuvant.com',
        'status': 'gold',
        'city': '',
        'regions': ['united-states']
}, {
    'name': 'Activar Soulciones, S.A. de C.V.',
        'url': 'http://www.activar.com.mx/',
        'urlText': 'www.activar.com.mx',
        'status': 'gold',
        'city': '',
        'regions': ['latin-america-caribbean']
}, {
    'name': 'Adcap Network Solutions',
        'url': 'http://www.adcapnet.com/',
        'urlText': 'www.adcapnet.com',
        'status': 'gold',
        'city': '',
        'regions': ['united-states']
}, {
    'name': 'Advanced Infraestructure & Security Solutions, SA',
        'url': 'http://www.aiss.com.mx/',
        'urlText': 'www.aiss.com.mx',
        'status': 'gold',
        'city': '',
        'regions': ['latin-america-caribbean']
}, {
    'name': 'Advanced Systems Group',
        'url': 'http://www.virtual.com/',
        'urlText': 'www.virtual.com',
        'status': 'gold',
        'city': '',
        'regions': ['united-states']
}, {
    'name': 'AE Business Solutions',
        'url': 'http://www.aebs.com/',
        'urlText': 'www.aebs.com',
        'status': 'platinum',
        'city': '',
        'regions': ['united-states']
}, {
    'name': 'Alexander Open Systems',
        'url': 'http://www.aos5.com/',
        'urlText': 'www.aos5.com',
        'status': 'gold',
        'city': '',
        'regions': ['united-states']
}];

self.selectedRegions = ko.observableArray();

self.selectedResellers = ko.observableArray(self.resellers.slice(0));

self.filterResellersByRegion = function () {
    alert(self.selectedRegions.length);
};
}

ko.applyBindings(new ResellersViewModel());

当我阅读文档时，该数组应该随着选择的更改而更新。我也在使用更改事件。我正在尝试使用更改事件来触发另一个 json 数组上的过滤器。但是，我连接到 selectedOptions 的 observable 永远不会将数据插入其中。这可以从我对检查数组长度的更改事件的警报中看出。我究竟做错了什么？我已经为这个问题设置了一个jsfiddle，请随时查看。感谢您对此的帮助。

4

1 回答 1

1

您必须调用 observableArray()以获取其长度值。 我不确定为什么（还没有调查过），但是.lengthobservableArray 上的属性不会更新并且始终为 0。这是仅使用属性（ source）获取基础数组的长度值的问题

alert(self.selectedRegions().length);

这会给你一个结果。

除非有另一个需要将该事件绑定到该元素，否则我会删除它并处理订阅/计算以对数组进行过滤。这是一个带有一些注释的小提琴。

于 2013-09-08T07:15:15.003 回答