无法让最简单的 knockout.js 示例正常工作？答案

【问题标题】：Can't get the most simple knockout.js sample to work?无法让最简单的 knockout.js 示例正常工作？
【发布时间】：2011-11-01 13:16:33
【问题描述】：

这真的让我很困扰。请看knockout.js的Hello World example。

这是我的代码：

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

【问题讨论】：

标签： javascript html knockout.js

【解决方案1】：

您的问题是您调用 ko.applyBindings 太快了。

你想要么将你的脚本标签移动到底部，要么在 onload 或类似 jQuery 的 ready 函数中执行它。

【讨论】：

【解决方案2】：

只需在脚本开头添加 window.onload= function()..

  window.onload= function() {

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

【讨论】：

【解决方案3】：

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

【讨论】：

【解决方案4】：

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

【讨论】：

【解决方案5】：

查看 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);

【讨论】：

那行不通。并且在示例中，dependentObservable 也没有 viewModel 参数
你用的是什么浏览器？我正在使用 Chrome:Mac，我得到了你的确切代码在这里工作：jsfiddle.net/3Appe/1
@GísliKonráð 看起来您的代码在 jsfiddle 上运行的原因是因为它设置为在加载时运行 js 库。

【解决方案6】：

如果值未绑定，则在使用数组之前启动检查功能。在淘汰赛中你可以这样做

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


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


 <!-- /ko -->

【讨论】：