Не можете заставить работать самый простой пример knockout.js? - PullRequest
Новая
       1

Не можете заставить работать самый простой пример knockout.js?

14 голосов
/ 23 августа 2011

Это действительно беспокоит меня. Пожалуйста, посмотрите на Hello World пример 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());, я получаю "Планету Земля", как и ожидалось. Но ни входные элементы, ни диапазон не заполняются данными.

Что я делаю не так?

Здесь - это zip-файл, который включает в себя и мой файл, и knockout.js

Ответы [ 6 ]

33 голосов
/ 23 августа 2011

Ваша проблема в том, что вы слишком рано вызываете ko.applyBindings.

Вы хотите либо переместить тег сценария вниз, либо выполнить его в режиме onload или что-то вроде функции готовности jQuery.

4 голосов
/ 03 сентября 2013

Просто добавьте window.onload = function () в начале скрипта .. 

  window.onload= function() {

    // Here's my data model
    var viewModel = {
......
    ko.applyBindings(viewModel); // This makes Knockout get to work
  }
</script>
3 голосов
/ 26 августа 2013

Это рабочая версия учебника 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>
1 голос
/ 21 июня 2012

ko.applyBindings() должен вызываться после загрузки представления, после чего данные автоматически связываются с элементами управления.

0 голосов
/ 23 октября 2014

Если значения не являются обязательными, просто запустите функцию проверки, прежде чем использовать массив.В нокауте вы можете сделать это как 

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


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


 <!-- /ko -->
0 голосов
/ 23 августа 2011

Глядя на демки для knockout.js, вы упускаете одну вещь.Вы не отправляете модель представления в качестве параметра в функцию independentObservable: 

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);
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...