計算後の入力のフォーカスを設定する方法

Question

私は、そのタイプに基づいてデバイスを表示するテーブル/グリッドを持っています。ドロップダウンが変更されるたびに、テーブルが更新されて正しいデバイスが表示されます。これを行うには、タイプごとにデバイスをフィルタリングし、テーブル/グリッドに新しい空の行を追加する計算があります。

ここではHTMLです：

<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/

グリッドを通して、あなたのタブは、最初に、すべてが正常に動作している場合。ただし、最後の行の最初の入力に何かを入力してタブオーバーすると、フォーカスが失われます。私は、計算が更新され、テーブルがフォーカスについて何も知らない新しい計算された配列で再びレンダリングされるため、これが起こっていると推測しています。私が望む機能を得る方法はありますか？

Answer 1

現在のアイテムを削除してコピーを追加するため、入力にフォーカスが失われます。現在の項目を配列内に維持すると、フォーカスはそのまま残ります。

変更

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

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