계산 된 값을 업데이트 한 후 포커스를 설정하는 방법

Question

유형에 따라 장치를 보여주는 표/표가 있습니다. 드롭 다운이 변경 될 때마다 테이블이 업데이트되어 올바른 장치를 표시해야합니다. 이렇게하려면 유형에 따라 장치를 필터링하고 테이블/그리드에 새로운 빈 행을 추가하는 계산이 있어야합니다.

<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입니다. 그러나 마지막 행의 첫 번째 입력에 무언가를 입력하고 탭 오버하면 포커스가 손실됩니다. 나는 계산 된 것이 업데이트되고 테이블이 포커스에 대해 아무것도 모르는 새로운 계산 된 배열로 다시 렌더링되기 때문에 이런 일이 일어난다 고 생각합니다. 원하는 기능을 얻을 수있는 방법이 있습니까?

Answer 1

현재 항목을 제거하고 사본을 추가하기 때문에 입력 내용의 초점이 맞지 않습니다. 배열의 현재 항목을 유지하면 포커스가 그대로 유지됩니다.

변경

self.addDevice = function (data) { 
    self.devices.push({ name: data.name, serial: data.serial }); 
}; 

self.addDevice = function (data) { 
    self.devices.push(data); 
};