BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] ko.applyBindingsの呼び出し時に「Cannot read property 'nodeType' of null」を取得する。

2022-12-06 08:02:39

質問

このようなノックアウトのコードがあります。 

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でこのようなメッセージが返されます。

Uncaught TypeError: nullのプロパティ 'nodeType' を読み取ることができません。

これはノックアウトファイルと私のスクリプトのこの行に関連しています。 

ko.applyBindings(new TaskListViewModel());

そしてこのエラーはノックアウトのこの行(1766)を指しています。 

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

私は何を間違えているのでしょうか？

どうすればいいのでしょうか？

この問題が発生したのは、私が HTML 要素が作成される前にバインドしようとしたためです。

私のスクリプトは HTML (head内) にロードされていましたが、私の HTML のコードの一番下 (body タグを閉じる直前) に読み込む必要がありました。

ご清聴ありがとうございました ジェームズ・アラーダイス .

可能な回避策は defer="defer" 

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

スクリプトがドキュメントコンテンツを生成しない場合に使用します。これは、スクリプトをロードする前にコンテンツがロードされるのを待つことができることをブラウザに伝えます。

さらなる読み物 .

お役に立てれば幸いです。

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します