Начало работы с Knockout JS - PullRequest
Новая
       9

Начало работы с Knockout JS

0 голосов
/ 03 февраля 2012

В настоящее время я занимаюсь разработкой с использованием ASP.NET, и я хотел бы начать работу с Knockout JS ... В основном я скопировал код, представленный в первом уроке.

Итак, я положил это в свой head: 

<script type="text/javascript">
    function() {
        // This is a simple *viewmodel* - JavaScript that defines the data and
        behavior of your UI

        function AppViewModel() {
            this.firstName = ko.observable("Bert");
            this.lastName = ko.observable("Bertington");

            this.fullName = ko.computed(function() {
            return this.firstName() + " " + this.lastName();    
        }, this);

        this.capitalizeLastName = function() {
            var currentVal = this.lastName();        // Read the current value
            this.lastName(currentVal.toUpperCase()); // Write back a modified value
        };
    }

    // Activates knockout.js
    ko.applyBindings(new AppViewModel());
    }();
</script>

... вместе с 

<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/knockout-2.0.0.js"></script>

В моем body я поместил 

<!-- This is a *view* - HTML markup that defines the appearance of your UI -->
<p>
    First name: <strong data-bind="text: firstName"></strong>
</p>
<p>
    Last name: <strong data-bind="text: lastName"></strong>
</p>
<p>
    First name:
    <input data-bind="value: firstName" /></p>
<p>
    Last name:
    <input data-bind="value: lastName" /></p>
<p>
    Full name: <strong data-bind="text: fullName"></strong>
</p>
<button data-bind="click: capitalizeLastName">
    Go caps</button>

Код был взят из руководства Knockout JS, но каким-то образом значения не связываются автоматически - другими словами, это не работает для меня.Я что-то здесь упускаю?

Ответы [ 3 ]

2 голосов
/ 03 февраля 2012

Мне кажется, что вы неправильно используете оболочку анонимной функции.

Вам нужно добавить еще () к коду. 

(function() { 
 ...
})();

Рабочий пример: http://jsfiddle.net/AlfeG/bZatD/

2 голосов
/ 03 февраля 2012

Мне кажется, что ваш код JavaScript выполняется до того, как DOM (ваш HTML) был отрендерен.Функция JavaScript, которую вы включили в заголовок, выполняется немедленно.Необходимо убедиться, что этот код выполняется только после полной визуализации страницы.

Это можно сделать с помощью функции jQuery ready . 

<script type="text/javascript">
  $(document).ready(function () {
    // your existing JavaScript goes here.
  })
</script>
1 голос
/ 03 февраля 2012

Если вы не хотите использовать jQuery, вы также можете:

  1. удалить внешнюю самовыполняющуюся функцию
  2. поместить скрипт, ссылающийся на модели представления выбивки, внизутело
...