/backbone-app

JavaScript MVC-framework based on BackboneJS

Primary LanguageJavaScript

Backbone App

backbone-app - это JavaScript MVC-фреймворк, основанный на BackboneJS, который поддерживает все необходимые фичи для реализации полноценного Single Page Application:

  • Компонентная архитектура

  • Роутинг

  • Работа с данными по REST

Как создать приложение на базе Backbone App

Если Вам не нужна работа с API:

  1. Создайте класс приложения App, наследуемый от класса BackboneApp.App.

  2. Создайте классы для каждой страницы, наследуемые от класса BackboneApp.Page.

  3. Создайте класс роутера, наследуемый от класса BackboneApp.Router. Определить в свойстве routes список адресов, по которым должны быть доступны страницы, созданные на шаге 2.

  4. Создайте блоки (компоненты) интерфейса, наследуемые от класса BackboneApp.Block. Их можно переиспользовать в разных местах.

  5. Включите созданные блоки в шаблоны создаваемых страниц и новых блоков.

Если Вам нужна работа с API:

  1. Создайте модель (для одной сущности) или коллекцию (для списка сущностей), наследуя их от BackboneApp.Model и BackboneApp.Collection соответственно. Пропишите в них rootUrl или url, по которому нужно загружать данные.

  2. Добавьте коллекции и модели, которые Вам нужны в свойства collections и models классов приложения и страниц соответственно. Они будут загружены перед их рендером.

  3. Далее можно работать с этими моделями/коллекциями, как с обычными моделями/коллекциями BackboneJS.

Модули Backbone App

Backbone App состоит из нескольких базовых модулей, каждый из которых имеет своё назначение.

  • Block - базовый модуль для блоков интерфейса. Наследуется от BackboneJS.View.
  • Page - базовый блок страницы интерфейса. Наследуется от Block.
  • App - базовый блок приложения. Наследуется от Block.
  • Model - базовый модуль модели данных. Наследуется от BackboneJS.Model.
  • Collection - базовый модуль коллекции данных. Наследуется от BackboneJS.Collection.
  • Router - базовый модуль роутера. Наследуется от BackboneJS.Router.

Жизненный цикл приложения

  1. Создаётся объект приложения App, который рендерится (обычно это loader) и загружает заданные данные.
  2. В методе App.initRouter создаётся объект роутера.
  3. Роутер на основе адресной строки определяет нужную страницу - создаётся объект страницы.
  4. Страница загружает заданные данные и рендерится.
  5. При переходе между страницами снова работают пункты 3-4.

Методы блока

Блок - компонент, на базе которого строится интерфейс. Его нужно наследовать от BackboneApp.Block.

Наиболее переиспользуемые методы/свойства блока:

  • initialize() - инициализация, вызывается 1 раз при создании блока.
  • fetch() - загрузка данных. По умолчанию, пустой метод. Вызывается 1 раз после создания блока.
  • template - HTML-шаблон, который должен рендерить блок. По умолчанию, Underscore HTML-template.
  • render() - рендер HTML-шаблона в DOM-элемент блока. Можно вызывать каждый раз, когда нужно перерендерить блок.
  • $(selector) - вложенный в блоке jQuery. Позволяет искать DOM-элементы внутри DOM-элемента блока.
  • $el - jQuery-DOM-элемент, в котором отрендерен блок.
  • trigger(eventName, eventData) - генерация события.
  • events - список обработчиков внутренних событий блока - как нативных JS-событий, так и событий, сгенерированных вложенными блоками.
  • globalEvents - список обработчиков событий блоков, не являющихся вложенными в данный.