Javascript Knockout.js-简单；“你好，世界”；失败_Javascript_Knockout.js

Javascript Knockout.js-简单；“你好，世界”；失败

javascript knockout.js

Javascript Knockout.js-简单；“你好，世界”；失败,javascript,knockout.js,Javascript,Knockout.js,我正在为knockout js（from）做一个非常简单的hello world：但是我的代码生成了一个我不理解的错误 <!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">

我正在为knockout js（from）做一个非常简单的hello world：但是我的代码生成了一个我不理解的错误

<!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>

我太无知了，不知道我做错了什么…

我想有两种解决方法

1个最简单的方法：将脚本包装在

使用jQuery的ready（）函数延迟初始化，直到页面加载完毕

2将脚本移动到以下位置：

名字：
姓氏：
你好

HTML是自上而下解析的。如果将脚本放在html元素之前，则可以在部分或所有页面元素准备好与之交互之前运行脚本。

在将主体添加到DOM之前执行脚本，主体是绑定的默认根节点。将脚本放在底部，如下所示：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Example</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.js"></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>

<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>


AJAX示例
名字：
姓氏：
你好
//这是我的数据模型
var ViewModel=函数（第一个，最后一个）{
this.firstName=ko.observable（first）；
this.lastName=ko.observable（last）；
this.fullName=ko.computed（函数（）{
//Knockout自动跟踪依赖项。它知道fullName依赖于firstName和lastName，因为在计算fullName时会调用它们。
返回此.firstName（）+“”+此.lastName（）；
}，这个）；
};
ko.applyBindings（新视图模型（“行星”、“地球”）；//这使得击倒开始工作

$(document).ready(function() {
    your script goes here
});

<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>

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>AJAX Example</title>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-3.0.0.debug.js"></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>

<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>