Javascript 敲除文本绑定不适用于输入_Javascript_Firebug_Knockout.js

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

javascript knockout.js

Javascript 敲除文本绑定不适用于输入,javascript,firebug,knockout.js,Javascript,Firebug,Knockout.js,作为一个Javascripts的初学者，我决定尝试一下淘汰赛，从非常简单的开始，到更高级的阶段。然而，我甚至无法在一个非常简单的场景中让它工作我猜问题很简单，在这里问这个我有点不好意思。但我不擅长调试Javascript，也不知道bug是如何表现出来的这是由asp.net MVC 3生成的页面的html源代码： <html> <head> <title>Index</title> <link href="/Content

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

我猜问题很简单，在这里问这个我有点不好意思。但我不擅长调试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>


指数
指数
var viewModel={
姓名：“乔”，
编号：“13”
};
应用绑定（视图模型）；

姓名：
编号：


姓名：
编号：

Joe或13不会绑定到输入或文本框

试着把它放在一个ko.observate（）中，但也不起作用。就像脚本没有运行一样

尝试使用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>


指数
var viewModel={
名称：ko.observable（“Joe”），
编号：ko.可观察（“13”）
};
$（函数（）{ko.applyBindings（viewModel）；}）
指数

姓名：
编号：


姓名：
编号：

我使用哪种applyBindings解决方案似乎无关紧要——它们都工作相同

因此，绑定最终起作用，但仅在IE和Firefox上有效，而在Chrome上无效。而且，可观察的东西根本不起作用。我无法通过写入输入字段来更新字段。

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

试试：

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


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

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


$（函数（）{
var viewModel={
姓名：“乔”，
编号：“13”
}; 
应用绑定（视图模型）；
});

。。如果您想要双向绑定（即，当用户在输入框中键入时，模型会更新），请将名称和编号设置为可观察的。

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

e、 g

名称：

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

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

今天的信息是：
var viewModel={
我的留言：“你好”
};
应用绑定（视图模型）；

Ok知道这很简单。那么，使用jquery.ready方法的惯例是什么呢？我想我可以用谷歌搜索它来了解它。$（文档）.ready（ko.applyBindings（viewModel））应该可以做到吗？它不起作用。$（function（）{ko.applyBindings（viewModel）；}）可能会更好地使用此解决方案+ko.observable以及Bert提供的解决方案（在关闭html标记下设置applybinding），它在firefox和IE上半工作，但在Chrome上不工作。在IE中，变量同时出现在输入框和范围中，但在输入更新时不更新。在firefox中，它不会出现在输入框中，而是在我查看源代码时应用到标记中。在chrome中，它根本不起作用。你引用了两次敲除javascript文件。仅引用一次，然后将引用移动到head标记中。

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