Получение "не удается прочитать свойство 'nodeType' null " при вызове 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">&nbsp;</b> incomplete task(s)
    <span data-bind="visible: incompleteTasks().length == 0"> - it's beer time!</span>
</body>

пример такой же, как и на веб-сайте Knockout, но когда я его запускаю, он возвращает это сообщение об ошибке Chrome Fire:

Uncaught TypeError: не удается прочитать свойство 'nodeType' из null

это связано с файлом нокаута и с этой строкой моего скрипта:

ko.applyBindings(new TaskListViewModel());

и эта ошибка указывает на эту строку (1766) на нокаут:

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

что я делаю не так?

4 97
javascript knockout.js

4 ответа:

эта проблема происходила, потому что я пытался связать HTML элемент перед его созданием.

мой скрипт был загружен поверх HTML (в голове) но его нужно было загрузить в нижней части моего HTML код (непосредственно перед закрывающим тегом body).

Спасибо за внимание Джеймс Аллардис.

возможное решение этой проблемы заключается в использовании defer="defer"

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

используйте это, если скрипт не собирается создавать какие-либо содержимое документа. Это сообщит браузеру, что он может дождаться загрузки содержимого перед загрузкой скрипта.

более дальнеишее чтение.

надеюсь, что это помогает.

171

вы можете рассмотреть возможность использования обработчика jQuery ready для этого

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

тогда вы достигнете двух вещей:

  1. избежать загрязнения глобального пространства имен
  2. нокаут привязка происходит после того, как создан дом. Вы можете разместить свой javascript там, где он подходит для организации.

см.http://api.jquery.com/ready/

33

Если у вас есть jQuery положить применить привязку внутри onload Так что нокаут ищет дом, когда дом готов.

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

у вас есть простая орфографическая ошибка:

self.addTask = fuction() {

должно быть:

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