删除文本绑定不能用于输入

Knockout text binding not working for input

本文关键字：用于 输入 不能 绑定 文本 删除      更新时间：2023-09-26

作为一个javascript的初学者，我决定尝试一下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>
<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。而且可观察对象根本不起作用。我不能通过写入输入字段来更新字段

输入标签应该绑定到name作为一个值，而不是一个文本

如

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

applyBindings必须在html完全加载后执行。通常，我从jquery调用它。如果你把包含applyBindings的脚本块放在需要绑定的html标签之后，

尝试:

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

    var viewModel = { 
        name: "Joe", 
        number: "13" 
    }; 
    ko.applyBindings(viewModel); 
});
</script>

. .如果你想要双向绑定(例如。当用户在输入框中输入

时，模型更新。

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

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