Wie der Fokus der Eingabe nach Berechnung festgelegt wurde aktualisiert

Question

Ich habe Tabelle/Raster, die Geräte basierend auf ihrem Typ zeigt. Wenn sich das Dropdown-Menü ändert, sollte die Tabelle aktualisiert werden, damit die richtigen Geräte angezeigt werden. Um dies zu tun, habe ich eine Berechnung, die die Geräte nach Typ filtert und eine neue leere Zeile zur Tabelle/Gitter hinzufügt.

Hier ist der 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> 

Knockout-Code:

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()); 

Hier ist die Geige für sie: https://jsfiddle.net/wa9108bf/

Wenn Sie mit der Tabulatortaste durch das Gitter zunächst alles funktioniert. Wenn Sie jedoch etwas in die erste Eingabe der letzten Zeile eingeben, wird der Fokus verloren. Ich vermute, dass dies passiert, weil das Berechnete aktualisiert wird und die Tabelle erneut mit dem neuen berechneten Array gerendert wird, das nichts über den Fokus weiß. Gibt es eine Möglichkeit, die gewünschte Funktionalität zu erhalten?

Answer 1

Die Eingabe verliert den Fokus, weil Sie das aktuelle Element entfernen und eine Kopie hinzufügen. Wenn Sie stattdessen das aktuelle Element im Array beibehalten, bleibt der Fokus bestehen.

ändern

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

zu

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