Микро шаблоны Underscore

Как говорит 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 напрямую. Но когда вы выработаете «бизнес-логику», эта процедура покажется вам лёгкой и удобной.

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

Var drawing = [ {id: 1, x1: 20, y1: 20, x2: 100, y2: 100, color: "#ff0000"}, {id: 2, x1: 420, y1: 220, x2: 500, y2: 400, color: "#00ff00"} ];

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

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

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

Var Rectangle = Backbone.Model.extend({}); var Rectangles = Backbone.Collection.extend({ model: Rectangle });

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

Var rectangles = new Rectangles(drawing);

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

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

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

// the scene class extends a Backbone view var Scene = Backbone.View.extend({ // renders an SVG rectangle from a shapes collection render: function() { var el = this.$el; el.empty(); this.collection.each(function(model) { var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect"); rect.setAttribute("x", model.get("x1")); rect.setAttribute("y", model.get("y1")); rect.setAttribute("width", model.get("x2") - model.get("x1")); rect.setAttribute("height", model.get("y2") - model.get("y1")); rect.setAttribute("style", "fill:" + model.get("color") + ";stroke:pink"); rect.id = model.get("id"); el.append(rect); }); return el; } })

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

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

Var scene; $(document).ready(function() { scene = new Scene({el: $("svg"), collection: rectangles }); });

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

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

Var Scene = Backbone.View.extend({ events: { "click rect": "handleClick" }, handleClick: function(ev) { var id = $(ev.currentTarget).attr("id"); var rect = this.collection.get(id); rect.set("color", getRandomColor()); }, // ... // binding events to data changes is important too: initialize: function() { this.listenTo(this.collection, "change:color", this.render); } });

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

Идём дальше

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

Rectangles; r = rectangles.get(1); r.set("color", "black");

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

Этот урок освещает процесс создания простого Backbone клиента, который обрабатывает ответ от Spring MVC .

Что вы создадите

Вы создадите Backbone клиент, который обрабатывает ответ от Spring MVC web-сервиса. В частности, клиент будет обрабатывать ответ от сервиса, созданного в .

Backbone клиент будет доступен при открытии в браузере файла index.html и будет обрабатывать ответ от запроса к сервису:

Http://rest-service.guides.spring.io/greeting

Для обработки статического содержимого вам необходимо создать минимальное количество кода. Приведенный ниже app.groovy скрипт достаточен для того, чтобы Spring Boot знал, что вы хотите запустить Tomcat:

@Controller class JsApp { }

Теперь вы можете запустить приложение, используя Spring Boot CLI:

Spring run app.groovy

Когда приложение запустится, откройте http://localhost:8080 в вашем браузере, где вы увидите:

Значение ID будет увеличиваться каждый раз при обновлении страницы

Итог

Поздравляем! Вы только что разработали Backbone клиент, который обрабатывает ответ от Spring RESTful web сервиса.

С оригинальным текстом урока вы можете ознакомиться на

Конечный результат

В этом уроке мы рассмотрим процесс создания менеджера контактов на Backbone.js, Underscore.js, и jQuery. Нами будут рассмотрены некоторые компоненты Backbone и методы Underscore.

Что это вообще за библиотеки?

Backbone - это фрэймворк, который позволяет создавать нетривиальные JavaScript приложения, используя парадигму MVC. Не в самом строгом виде, но позволяющую удобным образом организовать код.

Underscore - это утилита, позволяющая более удобным образом работать с JavaScript объектами; применять к ним расширенные функции работы с массивами, коллекциями, функциями и объектами.

jQuery, думаю, в представлении не нуждается.

Начинаем

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

Backbone.js Web App

Сохраняем её в файле index.html в корневом каталоге. Перед поключением Backnone вставляем jQuery и Underscore. Основной код программы будем писать в файле app.js, а стили хранить в screen.css. На самой странице у нас есть пустой контейнер, куда будем помещать блоки с записями.

Теперь можем приступать к главному js файлу, который будем дополнять в каждом следующем уроке. Для начала, добавляем следующий код:

(function ($) { var contacts = [ { name: "Contact 1", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" }, { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" }, { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" }, { name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" }, { name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" }, { name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "colleague" }, { name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "friend" }, { name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: "[email protected]", type: "family" } ]; } (jQuery));

Сохраняем как файл app.js. Весь код помещаем в анонимную функцию, делая jQuery алиас, с помощью знака $. Внутри мы определяем массив из целого набора записей, которые впоследствии будем выводить.

Модели

Модель представляет собой данные приложения; в нашем приложении это будет индивидуальный контакт с атрибутами name, номером и др. Можно сказать, что каждая модель - это атомарная часть приложения, небольшая ячейка с собственными функциями. После массива с данными вставляем следующий код:

Var Contact = Backbone.Model.extend({ defaults: { photo: "/img/placeholder.png" } });

Для создания модели в Backbone достаточно унаследовать от Backbone.Model, используя метод extend(). В качестве параметра, передаём объект, который и является по сути нашей моделью. Одним из полей ялвляется поле defaults, где мы можем задать какие-то значение по умолчанию для всей нашей модели целиком.

В этом примере мы создали поле, содержащие путь к изображению, которое будет вставляться по умолчанию к каждой записи, если у объекта его нет.

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

Коллекции

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

Var Directory = Backbone.Collection.extend({ model: Contact });

Как и в случае с моделями, создание коллекции происходит от наследования соответствующего класса. Опять же с помощью метода extend(). В поле model указываем, какой класс будем использовать для каждого объекта модели. В нашем случае, мы указали класс Contact, который реализуем позже.

Представления

Представления используются для вывода данных в HTML код. Разделение кода на различные компоненты очень полезно, если мы хотим что-то исправить, не затронув другие части. В нашем приложении мы создадим несколько представлений. Первое создадим сразу же после определения класса Directory:

Var ContactView = Backbone.View.extend({ tagName: "article", className: "contact-container", template: $("#contactTemplate").html(), render: function () { var tmpl = _.template(this.template); this.$el.html(tmpl(this.model.toJSON())); return this; } });

Представление будет выводить каждый контакт. Так же как с моделями и коллекциями, для создания представления нужно унаследовать его от класса Backbone.View. В настройках представления мы выставили несколько изначальных свойств: tagName для указания элемента контейнера; className для указания класса, присвоенного контейнеру. Для простоты воспользуемся классическим выводом HTML через шаблон.

Затем мы определяем метод render(); По умолчанию, данная функция не вызывается, однако мы сможем это реализовать, вызвав её из метода initialize().

render() используется методом Underscor-ом template() для передачи нужного шаблона. В ответ возвращается метод, который мы можем вызвать, чтобы использовать шаблон.

Далее передаём контент элемента на вывод, с помощью jQuery метода html(). Делается это благодаря методу template() Underscor-а. Данные из модели пропускаем через метод toJSON() Backbone. Заметьте, что мы используем $el, для того чтобы задать HTML контент. Это закэшированный jQuery объект.

В конце метода render() мы возвращаем объект this, отражающий наше представление.

Микро шаблоны Underscore

Теперь неплохо было посмотреть на процесс создания микро шаблона Underscore. Тут нам доступен метод template() для работы с шаблоном. В HTML код страницы запишем следующий код:

" alt="" /> Tel: Email:

Тут мы юзаем элемент с аттрибутом id для того, чтобы было легче его выбрать; а также собственное значение атрибута type, чтобы браузер автоматом его не выполнил. В самом шаблоне мы определяем HTML структуру блока и выводим информацию, с помощью подобных маркеров . В дальнейших уроках мы рассмотрим и другие возможности.

Базовый шаблон

Чтобы завершить логическую цепочку данного урока, давайте создадим ещё одно представление. В отличие от предыдущего представления, оно будет относиться не к модели 1:1, а к всему приложению - это будет базовый шаблон. Тут мы будем выводить общее число записей и другую инфу. После ContactView вставляем следующий класс:

Var DirectoryView = Backbone.View.extend({ el: $("#contacts"), initialize: function () { this.collection = new Directory(contacts); this.render(); }, render: function () { var that = this; _.each(this.collection.models, function (item) { that.renderContact(item); }, this); }, renderContact: function (item) { var contactView = new ContactView({ model: item }); this.$el.append(contactView.render().el); } });

Данное представление будет прикреплено к элементу, который уже существует на странице; контейнер, который мы захард-кодировали в . Выберем его через через свойство el. При реализации метода initialize(), который создаст объект класса нашей коллекции, мы вызовем метод render() для обработки шаблона.

Затем метод render() займётся базовым шаблоном. В функцию мы передадим объект, указывающий на представление, которое мы заюзаем в функции обратного вызова, а затем воспользуемся конструкцией each Underscor-а, чтобы пройтись по записям модели в нашей коллекции.

В функцию each передаём два аргумента (вообще, можно и один); первый - это коллекция, по которой проходимся; второй - анонимная функция, где будем обрабатывать каждый объект. Эта функция будет принимать один аргумент - текущий объект модели. Всё что нам нужно будет написать внутри, так это метод renderContact() и передать текущий объект модели.

В последнюю очередь нам нужно определить метод renderContact(). Тут нам нужно создать новый объект класса ContactView (помните, что класс ContactView представляет собой каждый отдельный контакт и содержится в поле model). Затем мы присоединяем сгенерированный код к базовому шаблону. Получаем доступ к нему через $el, который генерируется автоматом самим Backbone.

Главный шаблон ответственен за вывод всех записей. Всё что нам нужно сделать, так это его инициализировать.

Var directory = new DirectoryView();

При запуске приложения в браузере, увидим следующее:

Backbone создаст объект модели для каждого элемента массива, а затем будет осуществлён вывод на экран.

CSS оформления в данной серии уроков мы касаться не будем.

Итог

В этом уроки мы затронули фундаментальные сновы Backbone.js: модели, коллекции, представления. Модель - это класс, который создаётся для каждого объекта, представляющего ячейку информации, и формирует поведение. Коллекции предназначены для управления группами моделей и представлений.

В следующем уроке рассмотрим реализацию фильтра данных, а также компонент для создания маршрутов.