javascript 在knockoutjs 上绑定按键事件，未填充可观察对象
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11628789/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Binding keypress event on knockoutjs, observable not populated
提问by mat-mcloughlin
Need a little help with knockoutjs and binding a keypress event. I'm trying to hook up knockout so that I pick up on the enter keypress from within a text box. So I can perform the same action as clicking a button. Its a little tricky to explain but hopefully this JsFiddle will demonstrate what I'm trying to achieve.
在knockoutjs 和绑定按键事件方面需要一点帮助。我正在尝试连接淘汰赛，以便我从文本框中选择输入按键。因此，我可以执行与单击按钮相同的操作。解释起来有点棘手，但希望这个 JsFiddle 将展示我想要实现的目标。
The problem I have is that observable value is not getting updated and I think its something to do with an observable not being updated until focus moves away from the textbox?
我遇到的问题是 observable 值没有得到更新，我认为这与 observable 在焦点移离文本框之前没有更新有关？
Any solutions to this problem.
这个问题的任何解决方案。
Thanks!
谢谢！
回答by RP Niemeyer
One option is to use the valueUpdateadditional binding to force an update on each keypress. For example, you would do:
一种选择是使用valueUpdate附加绑定来强制每次按键更新。例如，你会这样做：
<input type="text" data-bind="value: InputValue, valueUpdate: 'afterkeydown', event: { keypress: RunSomethingKey }" />
If that is not what you are after, then really you would want to fire the element's change event in your handler. For example with jQuery, you would do something like: $(event.target).change();.
如果这不是您所追求的，那么您真的希望在处理程序中触发元素的更改事件。例如使用jQuery，你会做这样的事情：$(event.target).change();。
It would be better though to move this into a custom binding. Maybe something like (probably should check if the result of valueAccessor() is a function):
最好将其移动到自定义绑定中。也许类似（可能应该检查 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;
});
}
};
Here is your sample updated: http://jsfiddle.net/rniemeyer/nbnML/9/
这是您更新的示例：http: //jsfiddle.net/rniemeyer/nbnML/9/
回答by jnewcomb
Don't discount submit bindings: http://knockoutjs.com/documentation/submit-binding.html
不要打折提交绑定：http: //knockoutjs.com/documentation/submit-binding.html
This takes care of some IE 9/10 gotchas such as the return key not updating the observable. With this taken care of you don't need to intercept keycode 13
这可以解决一些 IE 9/10 问题，例如返回键不更新可观察对象。有了这个照顾，你不需要拦截键码 13
html:
html：
<form data-bind="submit:RunSomething">
<input type="text" data-bind="value: InputValue" />
<input type="submit" value="test" />
<div data-bind="text: InputValue" />
</form>
code:
代码：
var ViewModel = function () {
var self = this;
self.InputValue = ko.observable('');
self.RunSomething = function (ev) {
window.alert(self.InputValue());
}
}
ko.applyBindings(new ViewModel());
See this here:
在这里看到这个：
