获取“无法读取属性‘nodeType’”空”当调用 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>
该示例与淘汰赛网站上找到的示例相同,但是当我运行它时,它会在 Chrome Fire Bug 上返回此消息:
未捕获类型错误:无法读取 null 的属性“nodeType”
这与敲除文件和我的脚本的这一行有关:
ko.applyBindings(new TaskListViewModel());
并且此错误指向敲除上的这一行(1766):
var isElement = (nodeVerified.nodeType == 1);
我做错了什么?
I have this knockout code:
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());
This 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>
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:
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());
And this error is pointing to this line (1766) on knockout:
var isElement = (nodeVerified.nodeType == 1);
What am I doing wrong?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
发生这个问题是因为我试图在创建
HTML
元素之前绑定它。我的脚本加载在
HTML
顶部(在 head 中),但需要加载在我的HTML
代码底部(就在结束 body 标记之前)。感谢您的关注詹姆斯·阿勒迪斯。
一种可能的解决方法是使用
defer="defer"
如果脚本不会生成任何文档内容,请使用此方法。这将告诉浏览器可以在加载脚本之前等待内容加载。
进一步阅读。
希望有帮助。
This problem was happening because I was trying to bind an
HTML
element before it was created.My script was loaded on top of the
HTML
(in the head) but it needed to be loaded at the bottom of myHTML
code (just before the closing body tag).Thanks for your attention James Allardice.
A possible workaround is using
defer="defer"
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.
Further reading.
Hope it helps.
您可能需要考虑为此使用 jquery 就绪处理程序
然后您将实现两件事:
请参阅http://api.jquery.com/ready/
You might want to consider using the jquery ready handler for this
Then you achieve two things:
See http://api.jquery.com/ready/
如果您有 jQuery,请将 apply 绑定放入
onload
中,以便在 DOM 准备好时,knockout 会查找 DOM。if you have jQuery put apply binding inside
onload
so that knockout looks for the DOM when DOM is ready.您有一个简单的拼写错误:
应该是:
You have a simple spelling mistake:
Should be: