获取“无法读取属性”的nodeType'为null“在调用ko.applyBindings时 [英] Getting "Cannot read property 'nodeType' of null" when calling ko.applyBindings
问题描述
我有这个淘汰代码：
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"> </b> incomplete task(s)
<span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>
</body>
示例与Knockout网站上的示例相同，但是当我运行它时，它在Chrome Fire Bug上返回此消息：
The example is the same as the one found on the Knockout website, but when I run it, it returns this message on Chrome Fire Bug:
未捕获的TypeError：无法读取null的属性'nodeType'
Uncaught TypeError: Cannot read property 'nodeType' of null
这个与淘汰文件和我的脚本的这一行有关：
This one is related to the knockout file and to this line of my script:
ko.applyBindings(new TaskListViewModel());
这个错误指向淘汰线上的这一行（1766）：
And this error is pointing to this line (1766) on knockout:
var isElement = (nodeVerified.nodeType == 1);
我做错了什么？
推荐答案
这个问题发生了，因为我在创建之前尝试绑定一个 HTML 元素。
This problem was happening because I was trying to bind an HTML element before it was created.
我的脚本加载在 HTML 之上（在头部），但它需要加载到我的的底部HTML 代码（就在关闭正文标记之前）。
My script was loaded on top of the HTML (in the head) but it needed to be loaded at the bottom of my HTML code (just before the closing body tag).
感谢您的关注 James Allardice 。
可能的解决方法是使用 defer =defer
A possible workaround is using defer="defer"
<script src="script.js" type="text/javascript" defer="defer"></script>
如果脚本不会生成任何文档内容，请使用此选项。这将告诉浏览器它可以在加载脚本之前等待加载内容。
Use this if the script is not going to generate any document content. This will tell the browser that it can wait for the content to be loaded before loading the script.
希望有所帮助。
这篇关于获取“无法读取属性”的nodeType'为null“在调用ko.applyBindings时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
