javascript 敲除文本绑定不适用于输入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8035224/
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 text binding not working for input
提问by Ingó Vals
As a total beginner with Javascripts I decided to try out Knockout starting very simple and going more advanced. I however couldn't even manage to get it to work in a very simple scenario.
作为一个 Javascripts 的初学者，我决定尝试从非常简单的开始并更高级的 Knockout。然而，我什至无法让它在一个非常简单的场景中工作。
I'm guessing the problem is something very simple and I'm kind of embarrassed to be asking this here. But I'm not good at debugging Javascript and do not know how bugs might manifest so here goes.
我猜这个问题很简单，我有点不好意思在这里问这个问题。但我不擅长调试 Javascript 并且不知道错误可能如何表现，所以这里是。
This is the html source of the page after it's been generated by asp.net MVC 3 :
这是由 asp.net MVC 3 生成的页面的 html 源代码：
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2>Index</h2>
<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.js" type="text/javascript"></script>
<script type="text/javascript">
var viewModel = {
name: "Joe",
number: "13"
};
</script>
<script type="text/javascript">
ko.applyBindings(viewModel);
</script>
<ul>
<li>Name: <input data-bind="text: name"/></li>
<li>Number: <input data-bind="text: number"/></li>
</ul>
<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>
</body>
</html>
Joe or 13 does not get bound to the input or textbox.
Joe 或 13 不会绑定到输入或文本框。
Tried putting it in a ko.observable() but also deos not work. It's just like the script isn't running.
尝试将其放入 ko.observable() 但 deos 也不起作用。就像脚本没有运行一样。
Tried debugging using FireBug and I can see the applyBinding is executed and the viewModel object does include the correct variables.
尝试使用 FireBug 进行调试，我可以看到执行了 applyBinding 并且 viewModel 对象确实包含正确的变量。
It's probably something obvious that is going on here. If you can't see it here then could you point out what I should look for when using FireBug?
这里正在发生的事情可能很明显。如果你在这里看不到它，那么你能指出我在使用 FireBug 时应该寻找什么吗？
EDIT
编辑
After trying several combinations of the solutions given I'm still having problems. With one solution the HTML looks like this:
在尝试了几种解决方案组合后，我仍然遇到问题。使用一种解决方案，HTML 如下所示：
<html>
<head>
<title>Index</title>
<link href="/Content/Site.css" rel="stylesheet" type="text/css" />
<script src="/Scripts/jquery-1.5.1.min.js" type="text/javascript"></script>
<script src="/Scripts/knockout-1.3.0beta.debug.js" type="text/javascript"></script>
<script type="text/javascript">
var viewModel = {
name: ko.observable("Joe"),
number: ko.observable("13")
};
</script>
<script type="text/javascript">
$(function () { ko.applyBindings(viewModel); })
</script>
</head>
<body>
<h2>Index</h2>
<ul>
<li>Name: <input data-bind="text: name"></input></li>
<li>Number: <input data-bind="text: number"></input></li>
</ul>
<ul>
<li>Name: <span data-bind="text: name"></span></li>
<li>Number: <span data-bind="text: number"></span></li>
</ul>
</body>
</html>
Doesn't seem to matter which applyBindings solution I use they all work the same.
我使用哪种 applyBindings 解决方案似乎无关紧要，它们的工作方式都相同。
So the binding finally works but only on IE and Firefox but not on Chrome. Also the observable doesn't work at all. I can't update the fields by writing into the input field.
所以绑定最终有效，但仅适用于 IE 和 Firefox，而不适用于 Chrome。此外，observable 根本不起作用。我无法通过写入输入字段来更新字段。
回答by Stjani
The input tag should be bound to name as a value instead of a text
输入标签应该绑定到 name 作为值而不是文本
e.g
例如
Name:<input data-bind="value: name"></input>
回答by bert bruynooghe
applyBindings has to be executed after the html is completely loaded. Normally, I call it from the jquery.ready method, but I guess it will also work if you put the script block containing the applyBindings after the html tags that need binding.
applyBindings 必须在 html 完全加载后执行。通常，我从 jquery.ready 方法调用它，但我想如果您将包含 applyBindings 的脚本块放在需要绑定的 html 标记之后，它也会起作用。
回答by Mark Robinson
Try:
尝试：
<script type="text/javascript">
$(function () {
var viewModel = {
name: "Joe",
number: "13"
};
ko.applyBindings(viewModel);
});
</script>
.. and make name and number observable if you want two way binding (ie. model gets updated when user types into input box)
.. 并且如果您想要双向绑定，则使名称和数字可观察（即，当用户输入输入框时模型会更新）
回答by vannara
The script should be written below the binding control:
脚本应该写在绑定控件下面：
<div>Today's message is: <span data-bind="text: myMessage"></span></div><script type="text/javascript">
var viewModel = {
myMessage: "Hello"
};
ko.applyBindings(viewModel);</script>
