Knockout - создаем модели представления с наблюдаемыми переменными

| Воскресенье, 12 мая, 2013

Метки: Javascript, Knockout Комментарии: 0

Библиотека Knockout создана для выполнения трех основных функций:

1. Отслеживание наблюдаемых переменных и зависимостей
2. Декларативное связывание
3. Работа с шаблонами

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

MVVM и модели представления

MVVM (Model-View-View Model, Модель-Представление-Модель представления) – это шаблон построения пользовательских интерфейсов. Он разбивает потенциально сложные пользовательские интерфейсы на три части:

• Модель (Model) – это данные приложения. Данные представляют собой объекты и операции бизнес-модели (например, банковские счета осуществляют переводы денег). И эти данные не зависят от какого-либо пользовательского интерфейса. При использовании библиотеки Knockout (далее KO) обычно применяются вызовы Ajax к серверу для чтения или записи данных модели.
• Модель представления (View Model) – это специальный код, который представляет данные и операции конкретно для пользовательского интерфейса. Например, если нужно реализовать редактирование списка, то модель представления будет в виде объекта, содержащего элементы списка и методы для добавления и удаления этих элементов. Обратим внимание, что это не пользовательский интерфейс. Модель представления не содержит ни кнопок, ни стилей отображения и т.п. Это и не данные бизнес-модели.
  Mодель представления является как бы контейнером для несохраненных данных, с которыми работает пользователь через интерфейс приложения. Для KO, модели представления – это чистые javascript-объекты, которые не содержат никакой информации о HTML. Сохранение абстрактности модели представления позволяет оставаться ей простой, даже при сложном поведении интерфейса приложения.
• Представление (View) – интерактивный пользовательский интерфейс, отображающий состояние модели представления. Представление показывает данные из модели представления, посылает команды в модель представления (например, нажатие кнопок, выбор элементов и т.п.), а также представление моментально обновляется как только в модели представления поменялись значения. Для KO, представление это просто HTML документ с декларативным связыванием, которое обеспечивает связь с моделью представления.

Для того, чтобы создать модель представления для KO, просто объявляется объект JavaScript. Например:

var myViewModel = {
    personName: 'Bob',
    personAge: 123
};

И создадим очень простое представление для нашей модели представления, используя декларативное связывание. Например, следующая разметка отображает значение personName:

The name is <span data-bind="text: personName"></span>

Активация Knockout

Атрибут data-bind не является "родным" для HTML, хотя он полностью совместим с HTML5 и не вызывает проблем с HTML4. И так как браузеры не понимают значение этого атрибута нужно активизировать, библиотеку Knockout, чтобы исправить это.

Для активации библиотеки Knockout, добавим следующий код в блок <script>:

ko.applyBindings(myViewModel);

Этот код можно разместить либо внизу HTML-документа, либо в обработчике события окончания загрузки документа DOM-ready.

И все! Теперь представление состоит из кода, как будто мы написали следующий HTML:

The name is <span>Bob</span>

Параметры для функции ko.applyBindings:

• Первый параметр это модель представления, для которой устанавливается связь через декларативное связывание с представлением.
• Можно передать второй необязательный параметр, который укажет какую часть документа нужно использовать для поиска атрибутов data-bind. Например:

  ko.applyBindings(myViewModel,
        document.getElementById('someElementId'))
  

  Данный код ограничивает область связывания только элементом с ID someElementId и его внутренних элементов. Это может быть необходимо, если есть несколько моделей представления и они связаны с различными областями страницы.