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

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

1 个答案: