Knockout — первый взгляд

Knockout — еще один интересный и очень мощный фреймворк для JavaScript. Особенностью данного фреймворка является то, что он реализует паттерн MVVM(Model-View-ViewModel). Данный паттерн активно используется в WPF приложениях, так что с ним я уже был знаком.
Так что же такого замечательного может предложить Knockout, чего бы не смог сделать, например, jQuery? Вообще, наверное, любую задачу, которую может реализовать Knockout можно сделать и на jQuery, поэтому, лучше всего рассмотреть пример:  Данная программа представляет собой пример простейшего телефонного справочника. Использую jQuery, код данной, очень простой программы представлял бы из себя огромное количество подписок на события, тогда как Knockout позволяет этого избежать.
Для работы с Knockout нужна модель. Простейшую модель можно задать следующим образом:

   
      function Model(name, tel) {
            this.Name = ko.observable(name);
            this.Phone = ko.observable(tel);
        this.NameAndPhone = ko.computed(function() {
            return this.Name() + " " + this.Phone();
        }, this);
    }
Name и Phone - это имя и телефон соответственно. ko.observable делает данные поля отслеживаемыми, при изменении модели, они будут меняться в представлении и наоборот.
NameAndPhone представляет собой объединение из имени и телефона, ko.computed позволяет получить непосредственно значение переменных имени и телефона.
Теперь необходимо привязать модель:

   
 ko.applyBindings(new Model("Андрей", "+375123456789"));
Это создаст новую модель, с данными по умолчанию.
Остолось получить резальтат:
   
    

Имя:

Телефон:

Теперь подробнее о data-bind:
data-bing является единственным способом отображения данных и их связи с представлением в Knockout, в отличие от Angular, где полно всяческих директив.
Синтаксис следующий: data-bind="тип: значение"
В зависимости от типа, data-bind может принимать вид:

Управление текстом и появлением:

  • data-bind="visible: значение" - отвечает за отображение элемента.
  • data-bind="text: значение" - работа с текстом
  • data-bind="html: значение" - работа с HTML макетом
  • data-bind="css: значение" - работа с CSS
  • data-bind="style: { color: currentProfit() < 0 ? 'red' : 'black' }" - изменение непосредственно значение style элемента
  • data-bind="attr: { href: url, title: details } - работа с атрибутами

Управление потоком:

  • data-bind="foreach: значение" – вывод значений массива в виде повторяющегося шаблона
  • data-bind="if: значение" – выполняется в случае истинности выражения
  • data-bind="ifnot: значение" - выполениется в случае ложности выражения
  • data-bind="with: значение" – создаёт объект привязки
  • data-bind='component: "значение"’ – вставляет в объект указанный компонент

Работа с полями форм:

Для рабы с полями форм существуют следующие свойства: click, event, submit , enable , disable , value , textInput , hasFocus , checked , options , selectedOptions, uniqueName . Подробно описывать их работу я не буду, принцип тот же, как и описанных выше свойств, подробно можно рассмотреть в официальной документации.

Рендеринг шаблона

На данный пункт стоит обратить особое внимание. Синтаксис использования будет следующий:
   

 

 
 function MyViewModel() {
     this.people = [
         { name: 'Franklin', credits: 250 },
         { name: 'Mario', credits: 5800 }
     ]
 }
 ko.applyBindings(new MyViewModel());

Это не все возможные способы использования data-bind, также, при необходимости, есть возможность создания своих дополнений.

.

Добавить комментарий