RSS Мои друзья Контакты

Введение в KnockOut - новый взгляд на построение JavaScript приложений

Являясь пользователем Хабра очень часто видел статьи и обзоры фреймворков Knockout и Backbone. Честно говоря, не смотря на все прелести о которых писали об этих "штуках", интереса изучать их не было. Но когда у меня появилась задача создания сложных пользовательских интерфейсов, первое что я подумал - это использовать один из них. Так уж сложилось благодаря профессиональной лени, что я быстрее нагуглил Knockout нежели Backbone, зашел в туториалы, попробовал повторить и мне снесло башку. Большой интерес захватил мой мозг и я начал жадно поглощать всю документацию, которая доступна на официальном сайте.

Перевода на русский язык я не нашел и подумал: почему бы не опубликовать ее у себя в блоге. Предполагается перевести всю документацию с офф. сайта в вольном стиле.

Введение в Knockout

Knockout - это JavaScript библиотека, которая позволяет создавать сложные пользовательские интерфейсы и при этом оставляет код "чистым", расширяемым и хорошо читабельным. Основная задача, которую выполняет эта чудо-коробка - это автоматическое обновление пользовательского интерфейса при обновлении свойства в JavaScript модели.

Основные преимущества:

  • отслеживание зависимостей - автоматически обновляет нужные части интерфейса, когда данные в модели изменяются;
  • декларативное связывание - простой и понятный способ привязки (байндинга) определенных частей интерфейса к модели. Можно создать сложные динамические интерфейсы используя только вложенные привязки;
  • расширяемость - можно создавать нестандартные байндинги написав всего нескольких строк кода.
  • совместимость - может работать с любыми клиентскими и серверными технологиями;
  • компактность - всего 13Кб после gzip сжатия;
  • кроссбраузерность - IE 6+, Firefox 2+, Chrome, Safari и другие;
  • независимость от других библиотек;
  • хорошая документация.

В основе фреймворка лежит MVVM патерн разработанный в компании Microsoft. Последний, как и MVC используется для разделения логики и представления и также состоит из трех частей:

  • Model - как и в MVC представляет собой фундаментальные данные, необходимые для работы приложения;
  • View - отображение модели;
  • View Model - замена контроллеру, является посредником между первым и вторым. Включает в себе Model и команды, которые может использовать View не влияя непосредственно на саму модель.

ViewModel связывает модель и отображение при помощи событий. Если что-то поменялось в модели, то нужно изменить отображение и наоборот.

Knockout не замена jQuery!

Наверное все знают и любят jQuery. Это очень удобная обертка для роботы с DOM API, которая решает множество кроссбраузерных проблем. jQuery используется для изменения страницы при помощи низкоуровневого API, тогда как Knockout решает другие задачи!

Сложно использовать jQuery, когда создание пользовательского интерфейса становится нетривиальным: количество кода возрастает, он находится во все возможных частях вашего приложения, а фикс бага с каждой фичей занимает все больше времени. Например, нужно отобразить список сущностей, с указанием количества элементов в списке и кнопкой "Add Item", которая включена только если в списке меньше чем 5 элементов. Допустим количество строк будет хранится в каком-то span-e, тогда при изменении количества нужно не забыть обновить его содержимое подсчитывая при этом количество tr тегов или каких-то элементов с определенным классом. Также нужно не забыть выключить кнопку после того как к-во элементов станет равным 5. Потом конечно же захочется создать кнопку "Delete", при нажатии на которую, нужно также обновить весь пользовательский интерфейс.

Knockout решает подобные проблемы в несколько строк. Он позволяет расширять приложение и не боятся за последствия. Все что нужно сделать - это представить сущности как JavaScript массив и потом использовать foreach байндинг для того, чтобы представить его в виде таблицы или списка. Если он изменится отображение автоматически изменится, т.е. пользовательский интерфейс остается в актуальном состоянии без лишних телодвижений. Например, чтобы выводить к-во элементов в span-e, достаточно сделать на него bind

There are <span data-bind="text: myItems().count"></span> items

И все теперь можно вообще забыть о представлении и работать только с моделью. При каждом изменении модели Knockout сам обновит DOM элементы. Аналогично создать кнопку добавления нового элемента очень просто

<button data-bind="click: addItem, enable: myItems().count < 5">Add</button>

На кнопку прописано 2 байнда: click и enable. Первый - это функция обработчик на событие нажатия кнопки, а вторая - фильтр: как только к-во элементов станет равным 5, кнопка выключится автоматически.

И позже при создании кнопки удаления не придется думать о том что, где и как нужно обновить, Knockout сделает это за нас.

В заключение

Knockout (KO) не конкурент jQuery или другой библиотеки, которая предоставляет API для низкоуровневого управления элементами страницы. KO предоставляет высокоуровневый путь самурая способ связывания модели данных с ее отображением. KO не зависит от jQuery, но это не значит что их нельзя использовать вместе, это даже нужно делать поскольку в последнем реализовано очень много функционала, который позволяет делать отображение элементов более приятным.

P.S.: кого заинтересовало быстро идем на страничку туториалов. После изучения KO Gmail уже не покажется таким уж сложным AJAX приложением.

По материалам: Knockout

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

Комментариев: 1

  • alner
    Ответить 13 декабря 2012 г., 1:21
    Весь цикл переведенных статей хороший. В оригинале на английском воспринимается немного сложнее, а тут все понятно. Если будет вдохновение, напишите статьи помимо перевода официальной документации. Например, какие либо примеры из личной практики. Будет интересно.