具有许多选择列表的Knockout过滤器列表

Question

我正在尝试在淘汰赛中过滤集合时完成以下操作。

1. 根据数据集合（我这样做）渲染下拉列表
2. 使用多个下拉列表来过滤集合（目前我只能使用一个，呃）

3. 当使用任何选择列表过滤集合时，所有其他选择列表将使用可用于新过滤集合的选项进行更新

   

索引视图模型：

var bindingsComplete = false
    , vm = new vm()
    , urlparts = document.location.pathname.split(/\/|\?|&|=|\./g)
    , query = urlparts[3]
    , count = urlparts[4]
    , page = urlparts[5]
    , filterProperty = function (value, name) {
        var _this = this;
        _this.optionsVal = value;
        _this.optionsTxt = name;
    };

function vehicle(asvId, vName, vPrice, vClass) {
    var _this = this;
    _this.AllStockVehiclesId = ko.observable(asvId);
    _this.VehicleMakeName = ko.observable(vName);
    _this.VehicleRetailPrice = ko.observable(vPrice);
    _this.VehicleClass = ko.observable(vClass);
}

function createSelectList(data, propertyArray) {
    for (var i = 0; i < propertyArray.length; i++) {
        var property = propertyArray[i];
        var optionsArray = new Array();
        for (var ii = 0; ii < data.length - 1; ii++) {
            var option = data[ii][property];
            if (optionsArray.indexOf(option) == -1) {
                optionsArray.push(option);
                vm.selectList[property].options.push(new filterProperty(option, option));
            }
        }
    }
}

function vm() {
    var _this = this;
    _this.vehicles = ko.observableArray([]);
    _this.filter = ko.observable();
    _this.selectList = {
        VehicleMakeName: {
            options: ko.observableArray([])
            , selectValue: ko.observable()
        },
        VehicleClass: {
            options: ko.observableArray([])
            , selectValue: ko.observable()
        }
        , changedState: ko.observable()
    }
    selectListChanged = function(event) {
        console.log('change')
    }
    //_this.filterVehicles = _this.vehicles.filterByProperty('VehicleClass', 'C');
    _this.filterVehicles = ko.computed(function ()
    {
        if (_this.selectList.VehicleMakeName.selectValue() == undefined) {
            return _this.vehicles();
        } else {
            return ko.utils.arrayFilter(_this.vehicles(), function (vehicle) {
                return vehicle.VehicleMakeName() == _this.selectList.VehicleMakeName.selectValue();
            });
        }
    });

    _this.rvClass = ko.computed(function () {
        return ko.utils.arrayFirst(_this.selectList.VehicleClass.options(), function (item) {
            for (var i = 0; i < _this.filterVehicles().length; i++) {
                if (item.optionsVal === _this.filterVehicles()[i].VehicleClass()) {
                    //console.log(item.optionsVal);
                    //vm.selectList.VehicleClass.options.push(new filterProperty(item.optionsTxt, item.optionsVal))
                }
            }
        });
    })
/*
    _this.selectList.selectValue.subscribe(function (newValue) {
        _this.filterVehicles = _this.vehicles.filterByProperty('VehicleClass', newValue);
    })*/

    /*test = _this.filterVehicles;
    _this.selectList.VehicleClass.selectValue.subscribe(function (newValue) {
        _this.filterVehicles = _this.vehicles.filterByProperty('VehicleClass', newValue);
    })*/
}

ld.ajax.browse.Vehicles(query, function (data) {
    for (var i = 0; i < data.length - 1; i++) {
        vm.vehicles.push(new vehicle(
            data[i].AllStockVehiclesId
            , data[i].VehicleMakeName
            , data[i].VehicleRetailPrice
            , data[i].VehicleClass
        ));
    }
    var propertyArray = ['VehicleMakeName', 'VehicleClass'];
    createSelectList(data, propertyArray);
})

ko.applyBindings(vm);

查看：

<style>
    table {
        width: 100%;
    }
    td {
        padding: 5px;
    }
</style>
<h1>Search Results</h1>
<table>
    <thead>
        <tr>
            <td>Stock #
            </td>
            <td><select data-bind="options: selectList.VehicleMakeName.options
                                    , optionsText: 'optionsTxt'
                                    , optionsValue: 'optionsVal'
                                    , value: selectList.VehicleMakeName.selectValue
                                    , optionsCaption: 'VehicleMakeName', event: { change: selectListChanged }"></select>
            </td>
            <td>Price
            </td>
            <td><select data-bind="options: selectList.VehicleClass.options
                                    , optionsText: 'optionsTxt'
                                    , optionsValue: 'optionsVal'
                                    , value: selectList.VehicleClass.selectValue
                                    , optionsCaption: 'Class', event: { change: selectListChanged }"></select>
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: filterVehicles">
        <tr class="vehicle">
            <!--img data-bind="attr: { src: AllStockVehiclesId, title: '' }" /-->
            <td data-bind="text: AllStockVehiclesId"></td>
            <td data-bind="text: VehicleMakeName"></td>
            <td data-bind="money: VehicleRetailPrice"></td>
            <td data-bind="text: VehicleClass"></td>
        </tr>
    </tbody>
</table>