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

99

我有此基因剔除代码：

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中返回以下消息：

未捕获的TypeError：无法读取null的属性“ nodeType”

这与敲除文件和脚本的这一行有关：

ko.applyBindings(new TaskListViewModel());

并且此错误指向敲除时的这一行（1766）：

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

我究竟做错了什么？

javascript knockout.js

— 格列普
source

这种错字会导致SyntaxError。修正错字可以解决问题吗？

— James Allardice

是的...我更新了问题，因为出现了另一个错误。

— Gerep 2012年

176

发生此问题是因为我试图HTML在创建元素之前将其绑定。

我的脚本被加载到（顶部）的顶部，HTML但需要将其加载到HTML代码的底部（紧接在结束body标签之前）。

感谢您的关注James Allardice。

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

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

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

进一步阅读。

希望能帮助到你。

— 格列普
source

4

要强调的是：<script ...>标签必须位于页面底部，紧接在关闭</body>标签之前。

— aliteralmind 2014年

1

太好了，谢谢！我只是将脚本移到正文的末尾，所以效果很好。非常感谢

— Eleanor Zimmermann

33

您可能需要考虑为此使用jquery ready处理程序

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

然后，您实现了两件事：

避免污染全局名称空间
在创建DOM之后发生敲除绑定。您可以将javascript放在适合组织的任何位置。

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

— 詹姆斯·凯斯勒
source

1

未使用RTM的用户的剧透警告：$(handler)相当于$(document).ready(handler)

— Brock Hensley

21

如果您有jQuery，则将apply绑定放到内部，onload以便在DOM准备就绪时敲除操作即可查找DOM。

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

— 詹卡尔·马布卜（Jhankar Mahbub）
source

顺便说一句，顺便说一句，我可以在文档块中包含其他绑定吗？

— 艾伦·吉卡穆

1

感谢您的信息！！

— karthik 2013年

5

您有一个简单的拼写错误：

self.addTask = fuction() {

应该：

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

— 詹姆斯·阿勒迪斯
source