유형에 따라 장치를 보여주는 표/표가 있습니다. 드롭 다운이 변경 될 때마다 테이블이 업데이트되어 올바른 장치를 표시해야합니다. 이렇게하려면 유형에 따라 장치를 필터링하고 테이블/그리드에 새로운 빈 행을 추가하는 계산이 있어야합니다. 계산 된 값을 업데이트 한 후 포커스를 설정하는 방법
<table>
<thead>
<tr>
<th><!--Row Number--></th>
<th>Serial No.</th>
<th>Name</th>
<th><!--Delete Button--></th>
</tr>
</thead>
<tbody data-bind="foreach: filteredDevices">
<tr>
<td data-bind="text: $index() + 1"></td>
<td><input data-bind="value: serial, event: { change: ($parent.filteredDevices().length == $index() + 1) ? $parent.addDevice : '' }" /></td>
<td><input data-bind="value: name, event: { change: ($parent.filteredDevices().length == $index() + 1) ? $parent.addDevice : '' }" /></td>
<td><button type="button" data-bind="visible: $parent.filteredDevices().length != $index() + 1, click: $parent.deleteDevice">Delete</button></td>
</tr>
</tbody>
</table>
녹아웃 코드 : 여기
var DevicesViewModel = function() {
var self = this;
self.devices = ko.observableArray([{ name: 'test1', serial: 'test1', type: 'type1' },{ name: 'test2', serial: 'test2', type: 'type2' }]);
self.selectedDeviceType = ko.observable("type1");
self.deviceTypes = ko.observableArray([
{ value: 'type1', name: 'Type 1' },
{ value: 'type2', name: 'Type 2' }
]);
self.addDevice = function (data) {
self.devices.push({ name: data.name, serial: data.serial, type: data.type });
};
self.deleteDevice = function (device) {
self.devices.remove(device);
};
self.filteredDevices = ko.computed(function() {
var arr = ko.utils.arrayFilter(self.devices(), function (device) {
return device.type == self.selectedDeviceType();
});
arr.push({ name: null, serial: null, type: self.selectedDeviceType() });
return arr;
});
};
ko.applyBindings(new DevicesViewModel());
그것을 위해 바이올린입니다 : https://jsfiddle.net/wa9108bf/
그리드를 통해 당신 탭이 처음에 모든 것이 잘 작동하는 경우
다음은 HTML입니다. 그러나 마지막 행의 첫 번째 입력에 무언가를 입력하고 탭 오버하면 포커스가 손실됩니다. 나는 계산 된 것이 업데이트되고 테이블이 포커스에 대해 아무것도 모르는 새로운 계산 된 배열로 다시 렌더링되기 때문에 이런 일이 일어난다 고 생각합니다. 원하는 기능을 얻을 수있는 방법이 있습니까?
에 이것은 퍼즐 게임이다. –