当调用ko.applyBindings时,获取“无法读取属性”nodeType“null”

我有这个淘汰赛的代码:

function Task(data) { this.title = ko.observable(data.title); this.isDone = ko.observable(data.isDone); } function TaskListViewModel() { // Data var self = this; self.tasks = ko.observableArray([]); self.newTaskText = ko.observable(); self.incompleteTasks = ko.computed(function() { return ko.utils.arrayFilter(self.tasks(), function(task) { return !task.isDone() }); }); // Operations self.addTask = function() { self.tasks.push(new Task({ title: this.newTaskText() })); self.newTaskText(""); }; self.removeTask = function(task) { self.tasks.remove(task) }; } ko.applyBindings(new TaskListViewModel()); 

这个html:

 <head> <script type="text/javascript" src="jquery-1.7.1.min.js"></script> <script type="text/javascript" src="knockout-2.0.0.js"></script> <script type="text/javascript" src="script.js"></script> </head> <body> <h3>Tasks</h3> <form data-bind="submit: addTask"> Add task: <input data-bind="value: newTaskText" placeholder="What needs to be done?" /> <button type="submit">Add</button> </form> <ul data-bind="foreach: tasks, visible: tasks().length > 0"> <li> <input type="checkbox" data-bind="checked: isDone" /> <input data-bind="value: title, disable: isDone" /> <a href="#" data-bind="click: $parent.removeTask">Delete</a> </li> </ul> You have <b data-bind="text: incompleteTasks().length">&nbsp;</b> incomplete task(s) <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span> </body> 

该示例与Knockout网站上的示例相同,但是当我运行它时,它会在Chrome Fire Bug上返回此消息:

Uncaught TypeError:无法读取null属性的“nodeType”

这一个是与淘汰赛文件和我的脚本的这一行有关:

 ko.applyBindings(new TaskListViewModel()); 

这个错误是指向这条线(1766)在淘汰赛:

 var isElement = (nodeVerified.nodeType == 1); 

我究竟做错了什么?

发生这个问题是因为我在创build之前试图绑定一个HTML元素。

我的脚本被加载到HTML (在头部)的顶部,但它需要加载在我的HTML代码的底部(就在closures正文标签之前)。

感谢您的关注James Allardice 。

一个可能的解决方法是使用defer="defer"

 <script src="script.js" type="text/javascript" defer="defer"></script> 

如果脚本不会生成任何文档内容,请使用此选项。 这将告诉浏览器在加载脚本之前可以等待加载内容。

进一步阅读 。

希望能帮助到你。

你可能要考虑使用jQuery的就绪处理程序

 $(function() { function TaskListViewModel() { ... ko.applyBindings(new TaskListViewModel()); }); 

那么你有两件事情:

  1. 避免污染全局名称空间
  2. 在创buildDOM之后发生敲除绑定。 你可以把你的javascript放在适合组织的地方。

请参阅http://api.jquery.com/ready/

如果你有jQuery把应用绑定内部的onload以便挖空找DOM准备好DOM时。

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

你有一个简单的拼写错误:

 self.addTask = fuction() { 

应该:

 self.addTask = function() { //Notice the added 'n' in 'function'