Быстрый старт с Backbone.js

Как говорит Sam Goldwyn:

«Не обращайте большое внимание на критику, но и не игнорируйте её»

 

Один из жалобных комментариев на Pipefishbook гласит, что книга, вместо того, чтобы обсуждать Backbone, фокусируется на инструментах JavaScript.

 

Это правда: Backbone.js является внешним фронтнэдом библиотеки. Под «фронтнэдом» подразумевается HTML или JQuery. И действительно, первое знакомство с Backbone возможно и без упоминания модулей или помощи менеджеров.

Что ж, давайте начнём с простого: с SVG прямоугольника раскраски приложения, этого будет достаточно, чтобы показать, что из себя представляет Backbone.

index.html

Чтобы начать работу с браузером, вам необходимо знать хотя бы основы HTML. Простой “gestalt”(гештальт) HTML выглядит так:

После базовой настройки HTML ,можете подключать к своей работе библиотеки JavaScript, то есть Backbone и его составляющие Underscore and jQuer. Если у вас есть соединение с интернетом, то легче всего будет использовать некоторые ссылки на CDNs записи:

Т.е. библиотеки достаточно малы и могут быть включены в HTML-заголовке выше.

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

Теперь можете выдохнуть. Мы заложили основу приложения Backbone.

Построение данных.

Следующий шаг оформления -добавление начальных данных для чертежа. Это может вступить в противоречие с вашими привычками вставлять фигуру SVG напрямую. Но когда вы выработаете «бизнес-логику», эта процедура покажется вам лёгкой и удобной.

Итак, вот данные:

Начиная с ввода данных, вы приобретаете преимущество: получаете абстрактное представление того, с чем работаете. Вы же не начинаете строить машину снаружи, а изнутри - начиная с двигателя. Аналогично, данные являются двигателем для вашего UI.

Сначала, давайте преобразуем ряды графических данных в коллекции и модели Backbone. С помощью Backbone API’s будет легко исправить содержимое и просмотреть полученные изменения.

Для раскраски приложения базовые настройки коллекций и моделей Backbone выглядят так:

На своём JavaScript вы можете работать с экземплярами прямоугольников следующим образом:

В принципе, вы можете изменить свойства прямоугольников прямо сейчас. Также вы можете рассортировать и отфильтровать прямоугольники, содержащие родные команды Backbone.Для этого вы можете прочитать книгу «в идеале Pipefishbook»

Визуализация UI:

Удовольствие в UI заключается в его представлении! И, в завлечении пользователей через создание событий. Это то место, куда и приходит часть Backbone.js. Например, представление прямоугольников может быть создано с помощью Backbone.View так:

Внутри функции render, обычно находится вызов шаблонных функций. Запомните, конструкция DOM node “manually” просто отлично работает.

Примечание, рендеринг происходит в контексте, часто непосредственно после загрузки страницы:

Привлечение внимания пользователя:

Следующее, и последнее, понадобится вам для предоставления пользователю возможности просматривать объекты. Для этого добавьте(прикрепите) значок событий для мышки пользователя. Backbone.View создаст графу «события» для этого. Работа с событиями может быстро оказаться непростой. Чтобы оставить её простой, позвольте показать улучшенный подход к клику «события»:

Вы можете видеть, приложение медленно увеличивается в размерах. Это новая функция getRandomColor(). Но главное сейчас: мы фиксируем события для пользователей, и устанавливаем определенный вид, чтобы изменять события в данных слоя. Представление появляется по мере необходимости.

Идём дальше

Используя модель UI в коллекциях и моделях Backbone, вы можете установить цвет, взятый из браузеров, из других источников, из событий пользователя или из разработки консоли, например. Попробуйте разработки консоли:

Сейчас цвет прямоугольника изменился. Что ж, реальный чертёж требует гораздо большей работы. Вам придётся столкнуться с подобной работой при изображении кругов или линий. Даже простая функция getRandomColor() скопирована и взята отсюда. В идеале вы могли бы сделать повторное использование кода проще. Так JavaScript был сформирован из CommonJS или RequireJS.

Спасибо, что читаете!

Демо / GitHub

Теги: