Проблема с отфильтрованным фильтром

Question

У меня есть таблица, содержащая данные «устройства», когда пользователь выбирает устройство, форма устройства заполняется. Выпадающий список типа содержит все типы устройств и автоматически выбирается тип устройства выбранного устройства. Также имеется раскрывающийся список модели, который отображает только модели, относящиеся к выбранному типу устройства. Когда пользователь выбирает устройство из списка устройств, форма хорошо заполняется и все работает, но я хочу, чтобы в раскрывающемся списке моделей устройств также обновлялся , когда пользователь вручную выбирает другой тип устройства из раскрывающегося списка устройства , и это не работает.

Отрывок:

<select data-bind="options: selectedDevice() ? modelsByDeviceType(selectedDevice().DeviceTypeID) : null, optionsText: 'DeviceModelName', optionsValue: 'DeviceModelID', value: selectedDevice() ? selectedDevice().DeviceModelID : 0, optionsCaption: ''"></select> 

self.modelsByDeviceType = function (selectedDeviceType) { 
     return ko.utils.arrayFilter(self.deviceModels(), function (m) { 
     return (m.DeviceTypeID === selectedDeviceType); 
     }); 
    }; 

Полный код: https://jsfiddle.net/rickhaar/9aLvd3uw/8/

Answer 1

Вы в настоящее время работаете со статическими данными, вам необходимо изменить его нокаутировать наблюдаемые, то ваши значения обновят 2-полосное , Mapping плагин делает трюк для вас:

function vm() { 
 

 
    var self = this; 
 

 
    var devicesData = [{ 
 
    DeviceID: 1, 
 
    DeviceName: 'DVR1', 
 
    DeviceTypeID: 1, 
 
    DeviceModelID: 1 
 
    }, { 
 
    DeviceID: 2, 
 
    DeviceName: 'DVR2', 
 
    DeviceTypeID: 1, 
 
    DeviceModelID: 2 
 
    }, { 
 
    DeviceID: 3, 
 
    DeviceName: 'Cam1', 
 
    DeviceTypeID: 2, 
 
    DeviceModelID: 3 
 
    }, { 
 
    DeviceID: 4, 
 
    DeviceName: 'Cam2', 
 
    DeviceTypeID: 2, 
 
    DeviceModelID: 4 
 
    }]; 
 

 
    var deviceTypesData = [{ 
 
    DeviceTypeID: 1, 
 
    DeviceTypeName: 'DVR' 
 
    }, { 
 
    DeviceTypeID: 2, 
 
    DeviceTypeName: 'Camera' 
 
    }]; 
 

 
    var deviceModelsData = [{ 
 
    DeviceModelID: 1, 
 
    DeviceTypeID: 1, 
 
    DeviceModelName: 'BOSH AN 5000' 
 
    }, { 
 
    DeviceModelID: 2, 
 
    DeviceTypeID: 1, 
 
    DeviceModelName: 'Aver NEH1116HN' 
 
    }, { 
 
    DeviceModelID: 3, 
 
    DeviceTypeID: 2, 
 
    DeviceModelName: 'Axis M1054' 
 
    }, { 
 
    DeviceModelID: 4, 
 
    DeviceTypeID: 2, 
 
    DeviceModelName: 'FLIR A65' 
 
    }]; 
 

 
    self.devices = ko.observableArray([]); 
 
    self.deviceTypes = ko.observableArray([]); 
 
    self.deviceModels = ko.observableArray([]); 
 
    self.selectedDevice = ko.observable(); 
 

 
    self.init = function() { 
 
    ko.mapping.fromJS(devicesData, {}, self.devices); 
 
    ko.mapping.fromJS(deviceTypesData, {}, self.deviceTypes); 
 
    ko.mapping.fromJS(deviceModelsData, {}, self.deviceModels); 
 
    }; 
 

 
    self.selectDevice = function(index, item) { 
 
    self.selectedDevice(item); 
 
    }; 
 
    self.modelsByDeviceType = function(selectedDeviceType) { 
 
    return ko.utils.arrayFilter(self.deviceModels(), function(m) { 
 
     return (m.DeviceTypeID() === selectedDeviceType()); 
 
    }); 
 
    }; 
 

 
    self.init(); 
 

 
    return self; 
 
} 
 

 
ko.applyBindings(vm());

.selectedRow { 
 
    background-color: yellow; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout.mapping/2.4.1/knockout.mapping.js"></script> 
 
<table id="tblData" class="dataTable" border="1"> 
 
    <thead> 
 
    <tr> 
 
     <th>Device ID</th> 
 
     <th>Device Name</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody data-bind="foreach: devices"> 
 
    <tr data-bind="click: selectDevice.bind($data, $index()), css: { selectedRow: selectedDevice() === $data }"> 
 
     <td data-bind="text: DeviceID"></td> 
 
     <td data-bind="text: DeviceName"></td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 
<br/> 
 
<table border="0"> 
 
    <tbody> 
 
    <tr> 
 
     <td>Name</td> 
 
     <td> 
 
     <input type="text" style="width:80px" data-bind="value: selectedDevice() ? selectedDevice().DeviceName : ''" /> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Type</td> 
 
     <td> 
 
     <select data-bind="options: deviceTypes, optionsText: 'DeviceTypeName', optionsValue: 'DeviceTypeID', value: selectedDevice() ? selectedDevice().DeviceTypeID : 0, optionsCaption: ''"></select> 
 
     </td> 
 
    </tr> 
 
    <tr> 
 
     <td>Model</td> 
 
     <td> 
 
     <select data-bind="options: selectedDevice() ? modelsByDeviceType(selectedDevice().DeviceTypeID) : null, optionsText: 'DeviceModelName', optionsValue: 'DeviceModelID', value: selectedDevice() ? selectedDevice().DeviceModelID() : 0, optionsCaption: ''"></select> 
 
     </td> 
 
    </tr> 
 
    </tbody>