Question

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

我遇到的问题是可观察的值没有得到更新，我认为它与一个observable有关，直到焦点离开文本框才会被更新？

解决此问题的任何方法。

谢谢！

Answer 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/

Answer 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/

在knockoutjs上绑定keypress事件，可观察到没有填充

2 个答案: