Javascript 敲除可观察字段不会随着输入值变化而更新
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14545935/
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
Knockout observable field not updating on input value change
提问by Alex Hope O'Connor
I have noticed that I cannot get some of the Knockout live tutorials working or basic examples that should demonstrate the observable data binding.
我注意到我无法获得一些应演示可观察数据绑定的 Knockout 实时教程或基本示例。
Here is my code:
这是我的代码：
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8" />
<title>Testing</title>
<script type="text/javascript" src="knockout.js"></script>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
function TestViewModel() {
this.Name = ko.observable("Testing");
}
$(function() {
ko.applyBindings(new TestViewModel());
});
</script>
</head>
<body>
<h1>Testing Knockout.js</h1>
<div>
<div>
<span data-bind="text: Name"></span>
</div>
<div>
<input type="text" data-bind="value: Name"></input>
</div>
</div>
</body>
</html>
So when I open this up in Google Chrome or Firefox I would expect the value of the span tag to change as I change the text in the input, however this is not the case. Can someone please explain why the above does not work? (This code was pretty much copied from the documentation on the website)
因此，当我在 Google Chrome 或 Firefox 中打开它时，我希望 span 标签的值会随着我更改输入中的文本而更改，但事实并非如此。有人可以解释为什么上述不起作用吗？（此代码几乎是从网站上的文档中复制的）
Thanks, Alex.
谢谢，亚历克斯。
回答by nemesv
As of KO version 3.2 (as Salvador Dali answer'spointed out) you should use the textinputbindingfor instant updates:
从 KO 3.2 版开始（正如Salvador Dali 的回答所指出的那样），您应该使用textinput绑定进行即时更新：
<input data-bind="textInput: userName" />
In you are using an earlier Knockout version and the valuebinding, then you should make the following changes:
如果您使用的是较早的 Knockout 版本和value绑定，则应进行以下更改：
By default knockout updates the value of the observables on the change event (e.g when the focus of the textbox is lost).
默认情况下，knockout 会在 change 事件上更新 observables 的值（例如，当文本框的焦点丢失时）。
If you want instant update you need to specify the valueUpdateoption where the possible events are: keyup, keypress, afterkeydownsee more info in the documentation.
如果您想要即时更新，您需要指定valueUpdate可能事件所在的选项：keyup, keypress，afterkeydown请参阅文档中的更多信息。
So change your valuebinding:
所以改变你的value绑定：
<input type="text" data-bind="value: Name, valueUpdate: 'afterkeydown'"></input>
Demo JSFiddle.
演示JSFiddle。
回答by Salvador Dali
The accepted answer is correct, but in a new KO version 3.2 they added textinput binding.So instead of valuebinding you can use textInput:
接受的答案是正确的，但在新的 KO 3.2 版中，他们添加了textinput 绑定。因此，value您可以使用textInput以下命令代替绑定：
<input data-bind="textInput: userName" />
It does two important things:
它做了两件重要的事情：
- make immediate updates
- handles browser differences for cut, drag, autocomplete ...
- 立即更新
- 处理浏览器在剪切、拖动、自动完成等方面的差异...
回答by Rafe Smith
For those who wander in here (like me) wondering why it isn't working. Be mindful of your extra '()' usage. This got me in trouble with a nested observable like this:
对于那些在这里闲逛的人（像我一样）想知道为什么它不起作用。请注意您额外的 '()' 用法。这让我遇到了像这样嵌套的 observable 的麻烦：
Bad:
坏的：
<input data-bind="textInput: subItem().userName()" />
Good:
好的：
<input data-bind="textInput: subItem().userName" />
