如何在计算更新后设置输入焦点答案

【问题标题】：How to set focus of input after computed has been updated如何在计算更新后设置输入焦点
【发布时间】：2018-02-14 02:16:30
【问题描述】：

我有根据设备类型显示设备的表格/网格。每当下拉列表更改时，表格应更新以显示正确的设备。为此，我有一个按类型过滤设备并将新的空白行添加到表/网格的计算。

这里是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/

如果您最初浏览网格，则一切正常。但是，如果您在最后一行的第一个输入中键入一些内容并制表符，焦点就会丢失。我猜这是因为计算得到了更新，并且表格再次使用新的计算数组呈现，而新的计算数组对焦点一无所知。有没有办法获得我想要的功能？

【问题讨论】：

这是一个谜题。 ??????

标签： knockout.js focus knockout-3.0 computed-observable

【解决方案1】：

输入将失去焦点，因为您要删除当前项目并添加副本。如果您改为保留数组中的当前项，则焦点将保留。

改变

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

到

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

【讨论】：