Can't get the most simple knockout.js sample t

This really bothers me. Please have a look at the Hello World example of knockout.js.

Here is my code:

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

It seems, that the binding doesn't work. If I alert(viewModel.fullName()); I get "Planet Earth" as expected. But neither the input elements nor the span gets filled with data.

What am I doing wrong?

Here is a zip file which includes both my file and knockout.js

标签： javascript html5 knockout.js

6条回答

\"骚年 ilove

2楼-- · 2019-03-18 10:55

This is a working version of the KnockoutJs tutorial.

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

0人赞添加讨论(0) 举报

淡お忘

3楼-- · 2019-03-18 10:55

The ko.applyBindings() should called once the view gets loaded then the data gets binded to the controls automatically.

0人赞添加讨论(0) 举报

劳资没心，怎么记你

4楼-- · 2019-03-18 10:55

If the values are not binding just fire up a check functionality before you make use of the array. In knockout you can do this like

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


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


 <!-- /ko -->

0人赞添加讨论(0) 举报

做个烂人

5楼-- · 2019-03-18 10:56

Just add window.onload= function() in the beginning of script..

  window.onload= function() {

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

0人赞添加讨论(0) 举报

你好瞎i

6楼-- · 2019-03-18 11:02

Looking at the demos for knockout.js, you're missing one thing. You're not sending the view model as a parameter in to the dependentObservable function:

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

0人赞添加讨论(0) 举报

疯言疯语

7楼-- · 2019-03-18 11:17

Your issue is that you are calling ko.applyBindings too soon.

You want to either move your script tag to the bottom or execute it in an onload or something like jQuery's ready function.

0人赞添加讨论(0) 举报

Can't get the most simple knockout.js sample t

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间