ノックアウトフィルタリングされた配列の問題

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ウェイを更新します。

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>

：マッピング・プラグインは、あなたのためのトリックを行います