javascript - KnockoutJS 3.3.0 绑定(bind)似乎被延迟，直到我按 ENTER

Question

这很奇怪。

这是我的观点:

<table class="SelectedPerson">
    <tr><td>Emp ID</td><td><input data-bind="value : EmpID, event : { keypress : loadJson }" type="text" /></td></tr>
    <tr><td>Net ID</td><td><input data-bind="value : NetID, event : { keypress : loadJson }" type="text" /></td></tr>
    <tr><td>First Name</td><td><input data-bind="value : FirstName, event : { keypress : loadJson }" type="text" /></td></tr>
</table>

和我的结果

<table>
    <thead>
        <tr>
            <td>EmployeeID</td>
            <td>NetID</td>
            <td>FirstName</td>
            <td>LastName</td>
        </tr>
    </thead>
    <tbody id="PersonListViewModel" data-bind="foreach : people">
        <tr>
            <td data-bind="text : EmpID"></td>
            <td data-bind="text : NetID"></td>
            <td data-bind="text : FirstName"></td>
            <td data-bind="text : LastName"></td>
        </tr>
    </tbody>
</table>

我的 View 模型

    var ViewModel = function (EmpID, NetID, FirstName) {
        var self = this;
        self.EmpID = ko.observable(EmpID);
        self.NetID = ko.observable(NetID);
        self.FirstName = ko.observable(FirstName);
        self.people = ko.observableArray([]);

        self.loadJson = function (data, event) {
            var objectify = ko.toJS(self);
            console.log(objectify.EmpID);
            if (event.which == 13) {
                var objectify = ko.toJS(self);
                console.log(objectify.EmpID);
                console.log(ko.toJSON(self));

                $.ajax({
                    dataType: "json",
                    url: '/Home/GetRecords',
                    data: {
                        "json": ko.toJSON(data)
                    },
                    success: function (data) {
                        self.people(data);
                        console.log(data);
                    },
                    error: function () {
                        alert("error");
                    }
                });

            }

            return true;
        };
    };

    var vm = new ViewModel();
    ko.applyBindings(vm);

它与 C# 方法对话，该方法接受 JSON 作为参数，并根据您输入的内容返回结果。这一点单独工作时效果很好。

然而，发生的事情是这样的:想象一下这个数据库

[
{"EmpID":"123", "FirstName":"Jim"},
{"EmpID":"124", "FirstName":"Bob"}
]

1. 在 EmpID 字段中输入 123
2. 按 Enter
3. 没有结果
4. 再次按 Enter
5. 正确的结果，即 Jim 在结果中显示为名字匹配
6. 将 EmpID 更改为 124
7. 按 Enter
8. 结果相同，即 Jim 仍显示在结果中，名字匹配
9. 再次按 Enter
10. 正确的结果，即 Bob 在结果中显示为名字匹配。

有什么想法吗？

Answer 1

您应该使用 keyup 事件。您落后一键的原因是模型尚未更新。

<table class="SelectedPerson">
    <tr>
        <td>Emp ID</td>
        <td>
            <input data-bind="value : EmpID, event : { keyup : loadJson }" type="text" />
        </td>
    </tr>
    <tr>
        <td>Net ID</td>
        <td>
            <input data-bind="value : NetID, event : { keyup : loadJson }" type="text" />
        </td>
    </tr>
    <tr>
        <td>First Name</td>
        <td>
            <input data-bind="value : FirstName, event : { keyup : loadJson }" type="text" />
        </td>
    </tr>
</table>

工作示例:https://jsfiddle.net/w7c596L0/