使用敲除将输入输入绑定到函数调用答案

【问题标题】：Binding input enter to function call using knockout使用敲除将输入输入绑定到函数调用
【发布时间】：2014-04-09 16:07:34
【问题描述】：

当我按下回车键并使用元素中的值时，我试图让 input 元素调用一个函数：

<input id="searchQuery" placeholder="Search..." type="text" data-bind="value: searchQuery, valueUpdate: 'onkeydown', event: { keydown: searchQueryEntered }"/>

功能：

searchQueryEntered = function (value, event) {
    if (event.keyCode == 13)
       ...do some stuff...
},

我的函数确实被调用了，但是searchQuery 永远不会更新！我什至无法在input 中输入任何内容。不知何故，它被扔掉了。我正在尝试做的事情对我来说似乎很简单，但我无法做到正确。

【问题讨论】：

尝试在 valueUpdate 绑定中使用afterkeydown 而不是onkeydown。
Convert Javascript onkeypress to knockoutjs to call on enter 的可能重复项

标签： javascript knockout.js

【解决方案1】：

要修复您的输入，您需要从 keydown 处理程序返回 true：

    searchQueryEntered = function (value, event) {
        if (event.keyCode == 13) {
           ...do some stuff...
        }
        return true;
    }

那么你应该使用 valueUpdate: 'afterkeydown' 让你的模型在每次按键后更新。

查看这个工作示例：http://jsfiddle.net/tabalinas/h4u8E/

【讨论】：

【解决方案2】：

为回车键注册一个绑定处理程序

ko.bindingHandlers.onEnterKey = {
    init: function(element, valueAccessor, allBindings, vm) {
        ko.utils.registerEventHandler(element, "keyup", function(event) {
            if (event.keyCode === 13) {
                ko.utils.triggerEvent(element, "change");
                valueAccessor().call(vm, vm);
            }

            return true;
        });
    }         
};

然后你可以绑定如下onEnterKey: searchQueryEntered

见下面的小提琴 http://jsfiddle.net/NccZ8/2/

【讨论】：