Knockout.js - 简单的"Hello World"失败

Question

Knockout.js - 简单的"Hello World"失败

我正在为knockout js做一个非常简单的hello世界(来自http://goo.gl/lddLl):但是我的代码产生了一个我不明白的错误.

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>AJAX Example</title>
    <script src="../Scripts/jquery-2.0.3.js"></script>
    <script src="../Scripts/knockout-3.0.0.debug.js"></script>

    <script>

        // Here's my data model
        var ViewModel = function (first, last) {
            this.firstName = ko.observable(first);
            this.lastName = ko.observable(last);

            this.fullName = ko.computed(function () {
                // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName.
                return this.firstName() + " " + this.lastName();
            }, this);
        };

        ko.applyBindings(new ViewModel("Planet", "Earth")); // This makes Knockout get to work

    </script>
</head>
<body>

    <p>First name: <input data-bind="value: firstName" /></p>
    <p>Last name: <input data-bind="value: lastName" /></p>
    <h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

</body>
</html>

Run Code Online (Sandbox Code Playgroud)

ko.applyBindings调用引发错误:

未捕获的TypeError:无法读取null knockout-3.0.0.debug.js的属性'nodeType':2439

来自knockout-3.0.0.debug.js代码:

// Perf optimisation: Apply bindings only if...
// (1) We need to store the binding context on this node (because it may differ from the DOM parent node's binding context)
//     Note that we can't store binding contexts on non-elements (e.g., text nodes), as IE doesn't allow expando properties for those
// (2) It might have bindings (e.g., it has a data-bind attribute, or it's a marker for a containerless template)
var isElement = (nodeVerified.nodeType === 1);

Run Code Online (Sandbox Code Playgroud)

我太无知了,不知道我做错了什么......

Answer 1

Sha*_*boi 13

我猜想有两种解决方法.

最简单的方法:将脚本包装在里面

$(document).ready(function() {
    your script goes here
});
Run Code Online (Sandbox Code Playgroud)

使用jQuery的ready()函数来延迟初始化,直到页面加载完毕.

2移动你的脚本:

<p>First name: <input data-bind="value: firstName" /></p>
<p>Last name: <input data-bind="value: lastName" /></p>
<h2>Hello, <span data-bind="text: fullName"> </span>!</h2>

Run Code Online (Sandbox Code Playgroud)

HTML从上到下进行解析.如果你把脚本放在html元素之前,它们可以在一些或所有页面元素准备好与之交互之前运行.

归档时间：	12 年，5 月前
查看次数：	5065 次
最近记录：	12 年前