获取“无法读取属性‘nodeType’”空”当调用 ko.applyBindings 时

发布于 2025-01-02 12:22:55 字数 2255 浏览 0 评论 0原文

我有这个淘汰赛代码:

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>

该示例与淘汰赛网站上找到的示例相同,但是当我运行它时,它会在 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 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

吖咩 2025-01-09 12:22:55

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

我的脚本加载在 HTML 顶部(在 head 中),但需要加载在我的 HTML 代码底部(就在结束 body 标记之前)。

感谢您的关注詹姆斯·阿勒迪斯

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

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

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

进一步阅读

希望有帮助。

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 my HTML code (just before the closing body tag).

Thanks for your attention James Allardice.

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.

Further reading.

Hope it helps.

花期渐远 2025-01-09 12:22:55

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

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

然后您将实现两件事:

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

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

You might want to consider using the jquery ready handler for this

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

Then you achieve two things:

  1. Avoid polluting the global namespace
  2. Knockout binding occurs AFTER the DOM is created. You can place your javascript wherever it is suited for organization.

See http://api.jquery.com/ready/

弄潮 2025-01-09 12:22:55

如果您有 jQuery,请将 apply 绑定放入 onload 中,以便在 DOM 准备好时,knockout 会查找 DOM。

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

if you have jQuery put apply binding inside onload so that knockout looks for the DOM when DOM is ready.

$(document).ready(function(){
    ko.applyBindings(new TaskListViewModel());
});
夏末的微笑 2025-01-09 12:22:55

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

self.addTask = fuction() {

应该是:

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

You have a simple spelling mistake:

self.addTask = fuction() {

Should be:

self.addTask = function() { //Notice the added 'n' in 'function'
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文