无法获得最简单的knockout.js示例工作？

这真让我困扰。请看看knockout.js的Hello World example。无法获得最简单的knockout.js示例工作？

这里是我的代码：

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8" /> 
    <title>Home Page</title> 
    <script src="knockout-1.2.1.debug.js" type="text/javascript"></script> 

    <script type="text/javascript"> 
     // Here's my data model 
     var viewModel = { 
      firstName: ko.observable("Planet"), 
      lastName: ko.observable("Earth") 
     }; 
     viewModel.fullName = ko.dependentObservable(function() { 
      // Knockout tracks dependencies automatically. It knows that fullName depends on firstName and lastName, because these get called when evaluating fullName. 
      return viewModel.firstName() + " " + viewModel.lastName(); 
     }); 

     ko.applyBindings(viewModel); // 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>

看来，该绑定不起作用。如果我alert(viewModel.fullName());我得到“行星地球”预期。但是输入元素和跨度都不会被数据填充。

我在做什么错？

Here是一个zip文件，其中包括我的两个文件，并knockout.js

来源

2011-08-22 Sandro

您的问题是，你是太早打电话ko.applyBindings。

您希望将脚本标记移动到底部，或者在onload或jQuery的ready函数中执行它。

来源

2011-08-22 23:54:23

-2

望着演示，knockout.js，你错过了一两件事。你不发送视图模型作为参数到dependentObservable功能：

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

来源

2011-08-22 23:28:56 gislikonrad

这并没有诀窍。并且在该示例中，dependentObservable也没有viewModel参数 – Sandro

您使用的是哪种浏览器？我使用的是Chrome：Mac，我得到了你的确切代码在这里工作：http://jsfiddle.net/3Appe/1/ – gislikonrad

@GísliKonráð它看起来像你的代码工作在jsfiddle的原因是因为它设置为加载时运行js库。 – Zack

ko.applyBindings()应该在视图被加载后调用，然后数据被自动绑定到控件。

来源

2012-06-21 11:34:22 Ajay

这是KnockoutJs教程的工作版本。

<!DOCTYPE html> 
<html> 
<head> 

    <link rel="stylesheet" type="text/css" href="style/monitor.css"> 
    <script type="text/javascript" src="js/knockout-2.3.0.js"></script> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
    <script type="text/javascript"> 
     function WebmailViewModel() { 
      // Data 
      var self = this; 
      self.folders = [ 'Inbox', 'Archive', 'Sent', 'Spam' ]; 
      self.chosenFolderId = ko.observable(); 
      self.chosenFolderData = ko.observable(); 
      self.chosenMailData = ko.observable(); 

      // Behaviours  
      self.goToFolder = function(folder) { 
       self.chosenFolderId(folder); 
       self.chosenMailData(null); // Stop showing a mail 
       $.get('/mail', { 
        folder : folder 
       }, self.chosenFolderData); 
      }; 
      self.goToMail = function(mail) { 
       self.chosenFolderId(mail.folder); 
       self.chosenFolderData(null); // Stop showing a folder 
       $.get("/mail", { 
        mailId : mail.id 
       }, self.chosenMailData); 
      }; 

      // Show inbox by default 
      self.goToFolder('Archive'); 
     }; 


    </script> 
</head> 
<body onload="ko.applyBindings(new WebmailViewModel());"> 
    <!-- Folders --> 
    <ul data-bind="foreach: folders"> 
     <li> 
      The current folders are: <b data-bind="text: $data"></b> 
     </li> 
    </ul> 
    </body> 
    </html>

来源

2013-08-26 07:39:21

就在脚本的开头添加的window.onload =函数（）..

window.onload= function() { 

    // Here's my data model 
    var viewModel = { 
...... 
    ko.applyBindings(viewModel); // This makes Knockout get to work 
    } 
</script>

来源

2013-09-03 18:58:04

-2

如果数值并不具有约束力刚刚火起来的检查功能，你使用数组之前。在淘汰赛，你可以这样做，就像

< !-- ko if:detail() --> 


    --your HTML code to display the fields goes here-- 


<!-- /ko -->

来源

2014-10-23 03:45:07

无法获得最简单的knockout.js示例工作？

回答

相关问题