Question

这真让我烦恼。请查看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

Answer 1

您的问题是您过早地调用了ko.applyBindings。

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

Answer 2

只需在脚本开头添加window.onload = function（）..

  window.onload= function() {

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

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

Answer 4

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

Answer 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);

Answer 6

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

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


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


 <!-- /ko -->

无法获得最简单的knockout.js样本吗？

6 个答案: