敲除文本绑定不适用于输入答案

【问题标题】：Knockout text binding not working for input敲除文本绑定不适用于输入
【发布时间】：2013-07-16 20:38:23
【问题描述】：

作为一个 Javascripts 的初学者，我决定尝试 Knockout，从非常简单的开始到更高级的。然而，我什至无法让它在一个非常简单的场景中工作。

我猜这个问题很简单，我有点不好意思在这里问这个问题。但我不擅长调试 Javascript，也不知道 bug 会如何表现出来。

这是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 或 13 未绑定到输入或文本框。

尝试将其放入 ko.observable() 中，但 deos 也不起作用。就像脚本没有运行一样。

尝试使用 FireBug 进行调试，我可以看到 applyBinding 已执行，并且 viewModel 对象确实包含正确的变量。

这里发生的事情可能很明显。如果您在这里看不到它，您能否指出我在使用 FireBug 时应该注意什么？

编辑

在尝试了几种解决方案的组合后，我仍然遇到问题。使用一种解决方案，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>

我使用哪种 applyBindings 解决方案似乎并不重要，它们的工作原理都是一样的。

所以绑定最终有效，但仅适用于 IE 和 Firefox，但不适用于 Chrome。此外，可观察的根本不起作用。我无法通过写入输入字段来更新字段。

【问题讨论】：

标签： javascript firebug knockout.js

【解决方案1】：

输入标签应该绑定到名称作为值而不是文本

例如

Name:<input data-bind="value: name"></input>

【讨论】：

【解决方案2】：

applyBindings 必须在 html 完全加载后执行。通常，我从 jquery.ready 方法调用它，但我想如果将包含 applyBindings 的脚本块放在需要绑定的 html 标记之后，它也会起作用。

【讨论】：

好吧知道这很简单。那么使用这个 jquery.ready 方法的约定是什么？我想我可以用谷歌搜索一下。
$(document).ready(ko.applyBindings(viewModel)) 应该这样做吗？它不工作。
$(function(){ko.applyBindings(viewModel);}) 可能会更好

【解决方案3】：

试试：

<script type="text/javascript">
$(function () {


    var viewModel = { 
        name: "Joe", 
        number: "13" 
    }; 

    ko.applyBindings(viewModel); 
});
</script>

.. 如果您想要双向绑定（即当用户输入输入框时更新模型），请让名称和数字可观察到

【讨论】：

有了这个解决方案 + ko.observable 以及 Bert 提供的解决方案（在关闭 html 标记下设置 applybinding），它可以在 Firefox 和 IE 上运行，但不能在 Chrome 上运行。在 IE 中，变量同时出现在输入框和 span 中，但在输入更新时不会更新。在 Firefox 中，它不会出现在输入框中，而是在我查看源代码时应用到标签中。在 chrome 中它根本不起作用。
您两次引用了淘汰赛 javascript 文件。仅引用一次并将引用移动到 head 标签中。

【解决方案4】：

脚本应该写在绑定控件下面：

<div>Today's message is: <span data-bind="text: myMessage"></span></div><script type="text/javascript">
var viewModel = {
    myMessage: "Hello"
};
ko.applyBindings(viewModel);</script>

【讨论】：