在knockoutjs上绑定按键事件，未填充可观察到

Posted 2023-03-27

【中文标题】在knockoutjs上绑定按键事件，未填充可观察到

【英文标题】：Binding keypress event on knockoutjs, observable not populated

【发布时间】：2012-07-22 15:33:52

【问题描述】：

需要一些关于 knockoutjs 和绑定按键事件的帮助。我正在尝试连接淘汰赛，以便我从文本框中选择输入键。所以我可以执行与单击按钮相同的操作。解释起来有点棘手，但希望这个 JsFiddle 能展示我想要实现的目标。

http://jsfiddle.net/nbnML/8/

我遇到的问题是 observable 值没有得到更新，我认为这与 observable 直到焦点离开文本框才被更新有关？

此问题的任何解决方案。

谢谢！

【参考方案1】：

一种选择是使用valueUpdate 附加绑定来强制每次按键进行更新。例如，你会这样做：

<input type="text" data-bind="value: InputValue, valueUpdate: 'afterkeydown', event:  keypress: RunSomethingKey " />

如果这不是你所追求的，那么你真的会想在你的处理程序中触发元素的更改事件。例如，使用 jQuery，您可以执行以下操作：$(event.target).change();。

将它移到自定义绑定中会更好。也许是这样的（可能应该检查 valueAccessor() 的结果是否是一个函数）：

ko.bindingHandlers.enterKey = 
    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); //set "this" to the data and also pass it as first arg, in case function has "this" bound
            

            return true;
        );
             
;

这是您更新的示例：http://jsfiddle.net/rniemeyer/nbnML/9/

【讨论】：

很棒的答案。但是，在 Firefox 上，在文本框上按 Enter 会导致事件触发两次。请问有什么有用的想法吗？

@Nikhil - 可能需要做类似e.stopPropagation()的事情？

@RP - 这救了我！感谢您发布此信息！我注意到如果您添加字段，在它们上放置 KO 数据绑定，但忘记将它们添加到 ViewModel，它确实会中断。但那是我自己在实施过程中的错误，无论如何，当你这样做时，可能会破坏 KO。但只是想提醒任何可能想知道是这段代码，还是他们在使用它时正在做的事情，导致它崩溃的人——可能是他们！再次感谢。

我注意到，当我运行它时，我不需要 valueAccessor().call() 语句。

【参考方案2】：

不要打折提交绑定： http://knockoutjs.com/documentation/submit-binding.html

这可以解决一些 IE 9/10 的问题，例如返回键不更新 observable。有了这个照顾，你不需要拦截 keycode 13

html:

<form data-bind="submit:RunSomething">
 <input type="text" data-bind="value: InputValue" />
 <input type="submit" value="test" />
 <div data-bind="text: InputValue" />
</form>

代码：

var ViewModel = function () 
    var self = this;
    self.InputValue = ko.observable('');

    self.RunSomething = function (ev) 
        window.alert(self.InputValue());
    

ko.applyBindings(new ViewModel());

请看这里：

http://jsfiddle.net/jnewcomb/uw2WX/