Knockoutjs程序不能正常工作

我是Knockoutjs的新手，从http://learn.knockoutjs.com/ tutorial开始，但是当我在本地尝试时却不能正常工作。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>

来源

2012-10-22 Tribhuwan

您应该将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>

这里是工作提琴：http://jsfiddle.net/vyshniakov/s2LSE/

来源

2012-10-22 08:35:48

Knockoutjs程序不能正常工作

回答

相关问题