Question

我有一个数据表，可以观察到KO中的可观察数据。当您跳出最后一行的最后一个输入时，它会添加一行额外的输入，以便您输入新数据。它应该首先把焦点放在第一个输入上。当输入模糊时，它会运行一些检查。如果这些检查中的任何一个失败，我想显示一条消息（当前正在工作）并将焦点发送回该输入。我无法弄清楚如何重新获得这种关注。

以下是相关的HTML代码段：

<tbody data-bind="foreach: items">

    <tr>
        <td>
            <div data-bind="if: (itemNo.length < 1)"><input data-bind="value: itemNo, hasFocus: $parent.invalidItem, event: { blur: $parent.checkItemNo }, attr: { name: 'brochureitems[' + $index() + '].itemNo', id: 'brochureItems_' + $index() + '__itemNo' }, validationOptions: { errorElementClass: 'input-validation-error' }" class="form-control item-id" /></div>

这是我的淘汰赛代码：

var itemsModel = function(items) {
    var self = this;
    self.items = ko.observableArray(items);

    self.invalidItem = ko.observable(true);

    self.checkItemNo = function(data) {
        self.invalidItem(false);
        console.log(data);
        var itemNo = $.trim(data.itemNo());
        if (itemNo != "") {
            var item = "";
            $.each(window.listOfItems, function(i, v) {
                if (v.No.search(itemNo) != -1) {
                    item = v.Description;
                    return;
                }
            });
            if(item != "") {
                var match = ko.utils.arrayFirst(self.items, function(item) {
                    return itemNo === item.itemNo;
                });

                if (!match) {
                    data.itemDesc(item);
                }
            } else { // invalid item #
                slideDownMsg("Invalid item number.");
                slideUpMsg(3000);
                self.invalidItem(true);
            }
        }
    }



    self.submit = function() {
        //self.showErrors(true);
        if (viewModel.errors().length === 0) {
            console.log('Thank you.');
            $("#brochureForm").submit();
        }
        else {
            console.log('Please check your submission.');
            viewModel.errors.showAllMessages();
            $(".input-validation-error").first().focus();
        }
    }

    self.addLine = function() {
        self.items.push( new itemModel() );
    };

    self.insertLine = function(index) {
        self.items.splice(index, 0, new itemModel() );
    };

    self.removeItem = function(item) {
        self.items.remove(item);
    };

    self.errors = ko.validation.group(self.items, { deep: true, live: true });

    self.validate = function() {
        self.errors.showAllMessages();
    }        
};

显然，我留下了很多代码，但希望这足以说明我的问题。

Answer 1

请参阅https://stackoverflow.com/a/4186003/1287183

使用setTimeout

setTimeout(function() { self.invalidItem(true); }, 1);

此外，您可以在self.invalidItem(false);中取出checkItemNo。

knockoutjs动态添加行的hasfocus实现

1 个答案: