Knockout - делаем проще программирование с Javascript

| Вторник, 19 февраля, 2013

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

Knockout – это Javascript библиотека, реализующая шаблон Model-View-View Model (MVVM), которая помогает создавать сложные, интерактивные интерфейсы со связанной моделью данных. Если на веб странице много динамических элементов (например, пользователь взаимодействует с интерфейсом и изменяет через него внутренние данные, либо наоборот данные изменились и это должно отобразится на веб-странице), Knockout помогает реализовать это более проще и понятнее.

Основные характеристики библиотеки

• Четкое отслеживание зависимостей – автоматическое обновление нужных элементов интерфейса при любом изменении значений переменных в модели.
• Декларативное связывание – простой и понятный способ связывания элементов интерфейса и моделью данных. Создавать сложные динамические интерфейсы можно произвольно связывая представление с моделью. Модель может иметь несколько уровней вложенности.
• Простая расширяемость – возможность реализации собственных способов связывания элементов интерфейса c моделью и повторное использование этих реализаций.

Дополнительные возможности

• Библиотека написана на чистом Javascript, то есть работает с любым сервером или любой клиентской технологией.
• Может быть добавлена в уже созданное веб приложение без каких либо архитектурных изменений.
• Библиотека по размеру очень компактна, примерно 13 килобайт после применения gzip сжатия.
• Работает на всех популярных браузерах (IE 6+, Firefox 2+, Chrome, Safari и другие)
• Полный набор спецификаций. Библиотека разработана в BDD стиле (behavior-driven development), а это значит, что проверка правильного функционирования на новых браузерах и платформах проходит быстро и просто.

Разработчики, которые знакомы с Ruby on Rails, ASP.NET MVC или другими MV*-технологиями, могут представлять себе паттерн MVVM как MVC в реальном времени c декларативным синтаксисом. И считать библиотеку Knockout основным инструментом создания интерфейса для редактирования данных JSON.

Быстрому освоению библиотеки Knockout помогают интерактивные руководства на офици альном сайте knockoutjs.com. После получения базовых понятий можно ознакомится с примерами на том же сайте, и затем применять библиотеку в своих проектах.

Knockout конкурент для jQuery, Prototype и т.п. или помощник?

Библиотека jQuery отличная замена неуклюжему и плохо совместимому DOM API. Она хорошо справляется с манипулированием элементов и обработкой событий на веб-странице. Но Knockout решает другие задачи.

Как только интерфейс страницы становится нетривиальным и его поведение достаточно сложным, поддержка и дальнейшая разработка с jQuery становится довольно трудным и тяжелым занятием. Например, вы отображаете список элементов с указанием количества этих элементов и хотите, чтобы кнопка «Добавить» была доступна только, когда элементов в списке меньше пяти. jQuery не может работать с моделью данных, поэтому чтобы получить количество элементов в списке нужно посчитать количество элементов TR в таблице или количество DIV с определенным классом CSS . Или количество уже выведено в каком нибудь элементе SPAN, и нужно обновить его значение после добавления нового элемента. Необходимо также не забыть заблокировать кнопку «Добавить» как только количество TR стало пять. И дополнительно вас попросили добавить кнопку «Удалить», и нужно найти место для нее и определить необходимое поведение.

Как Knockout решит данную задачу?

Это будет намного проще. Представим элементы как Javascript массив. И используем связывание foreach для преобразования массива в таблицу или набор элементов DIV. Как только массив изменится, сразу же произойдут изменения на веб-странице. Не нужно думать, о том, как вставить новый элемент TR или DIV и куда его вставить. Интерфейс синхронизируется с моделью. Дополнительно, можно вывести количество элементов и связать с моделью:

Количество элементов: <span data-bind="text: myItems().count"></span>

И это все! Не нужно писать код обновления элементов интерфейса, они обновятся сами, как только изменится массив MyItems. Похожим образом блокируем и разблокируем кнопку «Добавить»:

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

Для реализации кнопки «Удалить», делаем изменения в модели и добавляем ее на страницу.

Итак, Knockout не конкурирует с jQuery и с подобными библиотеками. Он добавляет более удобный высокоуровневый способ связывания модели и интерфейса. В то же время Knockout может использовать jQuery, например для анимаций, Ajax-запросов и других полезных вещей.