javascript - KnockoutJS selectedOptions observableArray 对象在更改事件中为空

Question

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

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

我已将选择绑定(bind)到一个 json 数组。在选择上设置数据绑定(bind)时，我将一个 observableArray 连接到 selectedOptions 属性。这是我的 View 模型:

function ResellersViewModel() {
var self = this;

self.availableRegions = ko.observableArray([{
    'name': 'United States',
        'value': 'united-states'
}, {
    'name': 'Canada',
        'value': 'canada'
}, {
    'name': 'Latin America & the Caribbean',
        'value': 'latin-america-caribbean'
}, {
    'name': 'Europe, Middle East & Africa',
        'value': 'europe-middle-east-africa'
}, {
    'name': 'Asia-Pacific & Japan',
        'value': 'asia-pacific-japan'
}, {
    'name': 'China & 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());

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

Answer 1

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

alert(self.selectedRegions().length);

这会给你一个结果。

除非有另一个需要将该事件绑定(bind)到该元素，否则我会删除它并处理订阅/计算以对数组进行过滤。这是一个 fiddle有一些笔记。