Question

作为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（）中，但也不能正常工作。就像脚本没有运行一样。

尝试使用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。此外，观察结果根本不起作用。我无法通过写入输入字段来更新字段。

Answer 1

输入标记应绑定为值而不是文本

e.g

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

Answer 2

在完全加载html之后，必须执行

applyBindings。通常，我从jquery.ready方法调用它，但我想如果你把包含applyBindings的脚本块放在需要绑定的html标签之后它也会起作用。

Answer 3

尝试：

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


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

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

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

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

Knockout文本绑定不适用于输入

4 个答案: