BackBone.Js

Автор:Игорь Тельменко

BackBone.Js

В прошлой статье был описан фреймворк Angular.JS. И конечно же уже давно в воздухе висит вопрос "как там дела в других фреймворках?". Вот перехожу к разбору BackBone. Хотя формально Backbone - это библиотека, а не фреймворк.

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

HTML-код примера совсем простой. Здесь пара кнопок и место под будущий список.

А вот дальше начинается BackBone. Создаем модель.

Здесь вроде бы все интуитивно понятно. Модель Book создается через Backbone.Model.extend(), а через Backbone.Collection.extend() создается коллекция моделей Book.

Далее переходим к созданию видов. Понадобится сделать 2 вида. Первый - отображение одной книги, а второй - отображение списках (коллекции) книг.

Виды создаются через Backbone.View.extend(). Вид связывается с моделью через свойство model. Для отрисовки вида служит метод render(). В первом случает этот метод создает один пункт списка, а во втором в цикле вызывается одноименный метод первого вида.

В методах initialize() мы производим привязку  обработчиков событий моделей. В виде связанном с экземпляром модели книги мы обрабатываем событие change, а в виде для списка книг обрабатываем add. Это нужно для будущей работы кнопок управления списком.

И наконец, логика нашего простого приложения.

Думаю, что по комментариям в коде понятен принцип работы. Здесь видно, что в обработчиках кликов по кнопках происходит работа с экземплярами моделей. А на изменения в моделях, как мы видим реагируют наши виды.

Вы можете скачать пример и попробовать работу приложения.

Как можно видеть, так же как и с Angular, с помощью Backbone можно увязать изменения модели с отображением внешнего вида. Однако в Backbone  нужно будет описывать обработку событий для модели. В то время, как Angular делает это более менее самостоятельно опираясь на атрибут ng-model.

Здесь видно, что BackBone низкоуровневый. Здесь придется многое писать руками из того, что в Angular работает само. Но зато при более низкоуровневом подходе у нас больше контроля.

Что именно выбрать, я думаю, будет зависеть от конкретной задачи.

Конечно же возможности BackBone не заканчиваются тем, что описано выше. В Backbone так же, как и в Angular, можно прописывать и правила роутинга, чтобы получить правильные URL, о которых говорилось в прошлой статье. Есть возможность описывать правила валидации модели. Так же есть множество библиотек, которые можно подключить к BackBone для расширения его функционала. Этим в той же мере не может похвастаться Angular. Так что не все так однозначно.

Вот пока что и все. В следующих статьях мы продолжим знакомство  с различными JS фреймворками и узнаем не мало интересного.

 

 

Оставить ответ