Mvvm Knockoutjs程序不工作_Mvvm_Knockout.js

Mvvm Knockoutjs程序不工作

mvvm knockout.js

Mvvm Knockoutjs程序不工作,mvvm,knockout.js,Mvvm,Knockout.js,我对Knockoutjs是个新手，刚开始的时候也是一样，但当我在本地尝试时，它不起作用我是否需要在单独的文件或相同的文件中编写模型和视图，我的问题是如何运行第一个淘汰程序 <!DOCTYPE HTML> <html> <head> <title></title> <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax

我对Knockoutjs是个新手，刚开始的时候也是一样，但当我在本地尝试时，它不起作用

我是否需要在单独的文件或相同的文件中编写模型和视图，我的问题是如何运行第一个淘汰程序

<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
        <script type="text/javascript">
                    // 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>
            <div class='liveExample'>   
    <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>  
</div>
    </body>
</html>


//这是我的数据模型
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（新视图模型（“行星”、“地球”）；//这使得击倒开始工作
名字：
姓氏：
你好

您应该将

ko.applyBindings

放在页面末尾。以下是官方文件中的引用：

要激活敲除，请将以下行添加到块：

ko.applyBindings（myViewModel）
您可以将脚本块放在HTML的底部
文档，或者您可以将其放在顶部，并将内容包装在
DOM就绪处理程序，如jQuery的$函数
因此，代码应如下所示：
<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
    </head>
    <body>
       <div class='liveExample'>   
           <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>  
       </div>
       <script type="text/javascript">
            // 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>
    </body>
</html>


名字：
姓氏：
你好

//这是我的数据模型
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（新视图模型（“行星”、“地球”）；//这使得击倒开始工作

这里是工作小提琴：
你应该把ko.applyBindings
放在页面的末尾。以下是官方文件中的引用：
要激活敲除，请将以下行添加到块：
ko.applyBindings（myViewModel）
您可以将脚本块放在HTML的底部
文档，或者您可以将其放在顶部，并将内容包装在
DOM就绪处理程序，如jQuery的$函数
因此，代码应如下所示：
<!DOCTYPE HTML>
<html>
    <head>
    <title></title>
        <script type="text/javascript" src='http://cdnjs.cloudflare.com/ajax/libs/knockout/2.1.0/knockout-min.js'></script>
    </head>
    <body>
       <div class='liveExample'>   
           <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>  
       </div>
       <script type="text/javascript">
            // 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>
    </body>
</html>


名字：
姓氏：
你好

//这是我的数据模型
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（新视图模型（“行星”、“地球”）；//这使得击倒开始工作

这是工作小提琴：