Отключить фильтрацию элементов с помощью select selectedIndex, соответствующих элементам по идентификатору

Я хотел бы загрузить второй выбор на основе марки автомобиля. Я привязываю selectedIndexes к переменным ko.observable(). Я знаю, что могу добиться этого, используя optionsValue : 'id' и значение привязки к наблюдаемому, но мне нужно использовать selectedIndex в моем проекте. Спасибо

jsfiddle http://jsfiddle.net/diegopitt/xg8q5esu/

Моя модель просмотра:

ko.bindingHandlers.selectedIndex = {
    init: function(element, valueAccessor) {
        ko.utils.registerEventHandler(element, "change", function() {
             var value = valueAccessor();
            if (ko.isWriteableObservable(value)) {
               value(element.selectedIndex);   
            }
        });
    }
};

var viewModel = function(){
    var self = this;
    self.selectedMake = ko.observable();
    self.selectedType = ko.observable();

    self.makes = [
            {id:1, name: 'Dodge'},
            {id:2, name: 'BMW'}
    ];
    self.types = [
            {id: 1, make:1, name:'neon'},
            {id: 2, make:2, name:'328i'}
    ];
    self.carTypes = ko.computed(function(){
        return ko.utils.arrayFilter(self.types, function(item){
            return item.make === self.selectedMake();
        });
    });
    self.matchingTypes = ko.computed(function () {
        return ko.utils.arrayFilter(self.carTypes(), function (item, index) {
            return item.id === self.selectedType();
        });
    }); 
};
var model = new viewModel();
ko.applyBindings(model);

HTML:

<select id="make" class="form-control select pull-left" data-bind="options: makes, selectedIndex: selectedMake, optionsText : 'name'"></select>
<select id="type" class="form-control select pull-left" data-bind="options: carTypes, selectedIndex: selectedType, optionsText : 'name'"></select>

javascript knockout.js knockout-3.0
person Diego P    schedule 08.07.2015    source источник
comment
проверьте это jsfiddle.net/xg8q5esu/1 .   -  person super cool    schedule 08.07.2015

Ответы (1)


arrow_upward
0
arrow_downward

Поскольку для selectedMake задан индекс, вычисляемый self.carTypes должен сравнивать индекс, а не значение:

self.carTypes = ko.computed(function(){
    var carTypes = [];

    if (self.selectedMake() < self.types.length) {
        carTypes.push(self.types[self.selectedMake()])
    }

    return carTypes;
});

JsFiddle

person Wayne Ellery    schedule 08.07.2015
comment
все еще есть проблема, когда select загружает только один элемент, а при первой загрузке select не загружается, см. Friddle jsfiddle .net/diegopitt/f2f90w3e/2 - person Diego P; 08.07.2015
comment
Для каждой сборки существует только один тип, и ваш код использует обработчик события изменения, который не срабатывает при загрузке. - person Wayne Ellery; 09.07.2015