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>

我的ViewModel

    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"}
]

在EmpID字段中输入123
按Enter键
没有结果
再次按Enter键
正确结果，即Jim在结果中显示为名字匹配
将EmpID更改为124
按Enter键
相同的结果，即Jim仍然在结果中显示为名字匹配
再次按Enter键
正确结果，即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/

KnockoutJS 3.3.0绑定似乎被延迟，直到我按ENTER键

1 个答案: