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>

我已将select绑定到json数组。在select上设置数据绑定时，我将observableArray连接到selectedOptions属性。这是我的viewmodel：

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

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

Answer 1

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

的长度值

alert(self.selectedRegions().length);

那会得到一个结果。

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

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

1 个答案: