Начало работы с нокаутом JS

Question

В настоящее время я занимаюсь разработкой с использованием 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> 

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

Answer 1

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

1. удалить вашу внешнюю прямоприменяемую функцию
2. поместить скрипт ссылки просмотра Нокаута модели в нижней части тела

Answer 2

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

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

<script type="text/javascript"> 
    $(document).ready(function() { 
    // your existing JavaScript goes here. 
    }) 
</script> 

Answer 3

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

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

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

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