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

Pra*_*h K 33 javascript data-binding html5 mvvm knockout.js

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

无法读取null的属性"nodeType"

这是我的剧本:`

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

这是我的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>
Run Code Online (Sandbox Code Playgroud)

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

Bri*_*and 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>
Run Code Online (Sandbox Code Playgroud)

  • HTML从上到下进行解析.因此,如果您在页面顶部包含脚本(例如`<head>`部分),则可以在部分或所有页面元素准备好与之交互之前运行它们.还有其他方法可以做到这一点(响应DOM就绪事件),但将代码置于底部也是如此. (12认同)

lan*_*ava 35

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

$(document).ready(function() {
    ko.applyBindings(new ViewModel());
});
Run Code Online (Sandbox Code Playgroud)

  • 是的,它有效.我和你有同样的错误,这个页面帮助我用$ .ready()来解决它. (4认同)