<p data-bind = "text: book"> </ p> 
 <ul data-bind = "with: details">
  <li> Категория: <span data-bind = "text: category"> </ span> </ li>
  <li> Автор: <span data-bind = "text: author"> </ span> </ li>
  <li> Издатель: <span data-bind = "text: publisher"> </ span> </ li>
 </ UL>

 <script type = "text / javascript">
   function viewModel () {
    var self = this;
    self.book = ko.observable («Секрет»);
    self.details = ko.observable ({категория: «Психология», автор: «Ронда Бирн», издатель: «Simon & Schuster Ltd»});
   }
  ko.applyBindings (new viewModel ());    
 </ Скрипт> 

Шаблонирование

Привязка template заполняет связанный элемент DOM результатами рендеринга шаблона. Шаблоны — это простой и удобный способ построения сложных структур пользовательского интерфейса — возможно, с повторяющимися или вложенными блоками — в зависимости от данных модели представления. Существует два основных способа использования шаблонов. Первый, нативный шаблонизатор, — это механизм, который лежит в основе foreach , if , with другими привязками потока управления. Внутренне эти привязки потока управления захватывают разметку HTML, содержащуюся в вашем элементе, и используют ее в качестве шаблона для рендеринга против произвольного элемента данных. Эта функция встроена в Knockout и не требует никакой внешней библиотеки. Вы можете увидеть базовую схему для создания шаблона здесь:

  <div data-bind = "template: 'myTemplate'"> </ div>

 <script type = "text / html" id = "myTemplate">
 // код шаблона здесь
 </ Скрипт>

В следующем примере вы можете увидеть, как использовать его в действии:

  <div data-bind = "template: 'book-template'"> </ div>

 <script type = "text / html" id = "book-template">  
   <h3 data-bind = "text: title"> </ h3>
   <p> Автор: <span data-bind = "text: author"> </ span> </ p>
 </ Скрипт>

 <script type = "text / javascript">
    function viewModel () {
     var self = this;
     self.title = ko.observable («Секрет»)
     self.author = ko.observable ('Ронда Бирн')
    }
  ko.applyBindings (new viewModel ());    
 </ Скрипт> 

Здесь мы должны использовать идентификатор, равный имени шаблона, чтобы связать шаблон с остальной частью нашей разметки. В данном случае это «книга-шаблон».

Вместо использования короткого синтаксиса, описанного выше, мы можем передать больше параметров привязке шаблона, что даст нам более точный контроль над конечным результатом.

 // синтаксис: <div data-bind = "template: {name: 'myTemplate', data: myData, afterRender: myLogic}"> </ div>

 <div data-bind = "template: {name: 'book-template', data: bestseller, afterRender: msg}"> </ div>

 // шаблон здесь

 <script type = "text / javascript">
    function MyViewModel () {
     var self = this;
     self.bestseller = {title: 'The Secret', автор: 'Rhonda Byrne'};
     self.nor = {title: 'Some Name', автор: 'Some Author'};
     self.msg = function (elements) {
       alert ('Hip Hip Hooray !!! :)'); 
     }
    }
  ko.applyBindings (new MyViewModel ());    
 </ Скрипт> 

Здесь name — это идентификатор элемента, который содержит шаблон, который вы хотите отобразить; data являются объектом для предоставления в качестве данных для шаблона для визуализации; и afterRender — это функция обратного вызова, которая вызывается для визуализированных элементов DOM.

Следующий пример является эквивалентом привязки foreach . Здесь foreach передается в качестве параметра для привязки template .

 // синтаксис: <div data-bind = "template: {name: 'myTemplate', foreach: myArray}"> </ div>

 <div data-bind = "template: {name: 'book-template', foreach: books}"> </ div>

 // шаблон здесь

 <script type = "text / javascript">
    function MyViewModel () {
     var self = this;
     self.books = [
     {title: 'The Secret', автор: 'Rhonda Byrne'},
     {title: 'The Power', автор: 'Ронда Бирн'}
     ]
    }
  ko.applyBindings (new MyViewModel ());    
 </ Скрипт> 

Вы можете получить точно такой же результат, встроив анонимный шаблон непосредственно в элемент, к которому вы используете привязку foreach:

  <div data-bind = "foreach: books">  
   <h3 data-bind = "text: title"> </ h3>
   <p> Автор: <span data-bind = "text: author"> </ span> </ p>
 </ DIV> 

Второй способ использования шаблонов — подключить Knockout к стороннему движку шаблонов. Knockout передаст значения вашей модели внешнему шаблонному движку и вставит полученную строку разметки в ваш документ. Для примеров, которые используют движки шаблонов jquery.tmpl и Underscore, проверьте документацию .

Расширение наблюдаемых

Наблюдаемые нокауты предоставляют базовые функции, необходимые для поддержки чтения / записи значений и уведомления подписчиков, когда это значение изменяется. Однако в некоторых случаях вы можете захотеть добавить дополнительные функции к наблюдаемой, например, добавив дополнительные свойства к наблюдаемой. Удлинители нокаута обеспечивают простой и гибкий способ сделать это.

Создание экстендера включает добавление функции к объекту ko.extenders . Функция принимает сам наблюдаемый в качестве первого аргумента и любые опции во втором аргументе. Затем он может либо возвращать наблюдаемую информацию, либо возвращать что-то новое, например вычисляемую наблюдаемую, которая каким-то образом использует исходную наблюдаемую.

Теперь мы создадим наблюдаемый расширитель, который добавит возможность показывать подсказку.

  <input data-bind = 'value: name, hasfocus: name.on' />
 <span data-bind = "visible: name.on, text: name.hint"> </ span>
 <br />
 <input data-bind = 'value: pass, hasfocus: pass.on' />
 <span data-bind = "visible: pass.on, text: pass.hint"> </ span>

 <script type = "text / javascript">

 // начинаем наблюдаемый расширитель
 ko.extenders.hints = function (target, hint) {
  target.on = ko.observable () 
  target.hint = ko.observable ()

  function showHint (value) {
   target.on (значение? false: true);
   target.hint (значение? "": подсказка);
  }

  showHint (мишень ());

  вернуть цель;
 }; 
 // конец наблюдаемого расширителя

  function viewModel () {
   var self = this;
   self.name = ko.observable (). extend ({подсказки: «Введите здесь свое имя»})
   self.pass = ko.observable (). extend ({подсказки: «Введите здесь свой пароль»})
  };
 ko.applyBindings (new viewModel ());
 </ Скрипт> 

Пользовательские привязки

Встроенные привязки Knockout позволяют вам обрабатывать большинство сценариев связывания, но если вы столкнетесь со специализированным сценарием связывания, который не охвачен, вы можете создавать собственные привязки с помощью Knockout, который дает вам большую гибкость для инкапсуляции сложного поведения в простой для понимания повторное использование Например, вы можете создавать интерактивные компоненты, такие как сетки, наборы вкладок и т. Д., В форме пользовательских привязок.

Связывание нокаута состоит из двух методов: init и update . Создать привязку так же просто, как создать объект с помощью этих двух методов и зарегистрировать этот объект с помощью Knockout с помощью ko.bindingHandlers как показано ниже.

  ko.bindingHandlers.yourBindingName = {   
   init: function (element, valueAccessor, allBindingsAccessor, viewModel) {

   },   
   update: function (element, valueAccessor, allBindingsAccessor, viewModel) {

   } 
 };

 // после того, как вы создали, вы можете использовать вашу пользовательскую привязку так же, как и любую встроенную
 <div data-bind = "yourBindingName: someValue"> </ div>

  <textarea data-bind = "scaleOnFocus: scaleArea, scaleUp: {height: '200', ширина: '400'}, scaleDown: {height: '15', ширина: '150'}"> </ textarea>

 <script type = "text / javascript">

 // начинаем привязку
 ko.bindingHandlers.scaleOnFocus = {

  init: function (element, valueAccessor) {
   $ (element) .focus (function () {
    var value = valueAccessor ();
    значение (истина);
   });
   $ (element) .blur (function () {
    var value = valueAccessor ();
    значение (ложь);
   });     
  },

  update: function (element, valueAccessor, allBindingsAccessor) {
   var value = valueAccessor ();
   var allBindings = allBindingsAccessor ();
   var up = allBindings.scaleUp;
   var down = allBindings.scaleDown;
    if (ko.utils.unwrapObservable (value))
     $ (Элемент) .animate (вверх);
    еще 
     $ (Элемент) .animate (вниз);
  }
 };
 // конец пользовательского связывания

 function viewModel () {
  var self = this;
  self.scaleArea = ko.observable ()
 };

 ko.applyBindings (new viewModel ());
 </ Скрипт>

 <input data-bind = 'value: name, hasfocus: name.on' />
 <span data-bind = "visible: name.on, text: name.hint"> </ span>
 <br />
 <input data-bind = 'value: email, hasfocus: email.on' />
 <span data-bind = "visible: email.on, text: email.hint"> </ span>
 <br />
 <textarea data-bind = "value: msg.hint, scaleOnFocus: scaleArea, scaleUp: {height: '200', width: '400'}, scaleDown: {height: '50', width: '150'}"> </ TextArea>

 <script type = "text / javascript">
 ko.extenders.hints = function (target, hint) {
  target.on = ko.observable () 
  target.hint = ko.observable ()

  function showHint (value) {
   target.on (значение? false: true);
   target.hint (значение? "": подсказка);
  }

  showHint (мишень ());

  вернуть цель;
 }; 

 ko.bindingHandlers.scaleOnFocus = {

  init: function (element, valueAccessor) {
   $ (element) .focus (function () {
    var value = valueAccessor ();
    значение (истина);
   });
   $ (element) .blur (function () {
    var value = valueAccessor ();
    значение (ложь);
   });     
  },

  update: function (element, valueAccessor, allBindingsAccessor) {
   var value = valueAccessor ();
   var allBindings = allBindingsAccessor ();
   var up = allBindings.scaleUp;
   var down = allBindings.scaleDown;
    if (ko.utils.unwrapObservable (value))
     $ (Элемент) .animate (вверх);
    еще 
     $ (Элемент) .animate (вниз);
  }
 };

 function viewModel () {
  var self = this;
  self.name = ko.observable (). extend ({подсказки: «Введите ваше полное имя»})
  self.email = ko.observable (). extend ({подсказки: введите правильный адрес электронной почты}})
  self.msg = ko.observable (). extend ({подсказки: «Оставить сообщение ...»})
  self.scaleArea = ko.observable ()
 };
 ko.applyBindings (new viewModel ());
 </ Скрипт>