Не удается получить самый простой образец knockout.js для работы?

Это действительно беспокоит меня. Пожалуйста, посмотрите пример 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 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

Ответы

Ответ 1

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

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

Ответ 2

Это рабочая версия учебника 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>

Ответ 3

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

  window.onload= function() {

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

Ответ 4

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

Ответ 5

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

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

Ответ 6

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

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


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


 <!-- /ko -->