为什么我使用Knockout JS获得“无法读取属性'nodeType'的null”错误?

时间:2013-02-26 13:12:28

标签: javascript html5 data-binding mvvm knockout.js

今天是Knockout的第一天。得到了它。下面是我使用knockout.js的第一个示例代码,它显示错误。

  

无法读取属性' nodeType'为null

这是我的剧本:`

   function ViewModel()  
   {  
     var self = this;  
     self.n1 = ko.observable(10);  
     self.n2 = ko.observable(10);  
     self.n3 = ko.observable(10);  
   }  
   ko.applyBindings(new ViewModel());  `

这是我的HTML:

<body>
<p>Number1:<input data-bind="value:n1"></input></p>
<p>Number2:<input data-bind="value:n2"></input></p>
<p>Number3:<input data-bind="value:n3"></input></p>
</body>

我想知道上述错误的原因以及如何克服错误......

3 个答案:

答案 0 :(得分:44)

如果你设置这样的代码,它就会起作用。

<body>
<p>Number1:<input data-bind="value:n1"></p>
<p>Number2:<input data-bind="value:n2"></p>
<p>Number3:<input data-bind="value:n3"></p>
<script src="knockout.js"></script>
<script>

function ViewModel() {  
   var self = this;  
   self.n1 = ko.observable(10);  
   self.n2 = ko.observable(10);  
   self.n3 = ko.observable(10);
}  

ko.applyBindings(new ViewModel());  `

</script>
</body>

答案 1 :(得分:34)

如果你想让你的<script>保持在页面顶部,你可以使用jQuery的ready()函数来延迟初始化,直到页面加载完毕。

$(document).ready(function() {
    ko.applyBindings(new ViewModel());
});

答案 2 :(得分:1)

我认为ko.applyBindings(obj);应该在视图模型下写。

<!DOCTYPE html>
<html>
<head>
    <title>KO Examples</title>
    <script type='text/javascript' src='knockout-3.1.0.js'></script>
    <script type='text/javascript' src='jquery.js'></script>
    <script type='text/javascript'>
        var  obj = {
            first_name : 'Gazal Irish'
        };


    </script>

</head>
<body>
<div>
    <p>My name : <span data-bind="text: first_name"></span>
<p> 
</div>
<script type="text/javascript">

    ko.applyBindings(obj);
</script>

</body>
</html>