Создаём менеджер контактами на Backbone.js (часть 1)
Конечный результат
В этом уроке мы рассмотрим процесс создания менеджера контактов на Backbone.js, Underscore.js, и jQuery. Нами будут рассмотрены некоторые компоненты Backbone и методы Underscore.
Что это вообще за библиотеки?
Backbone - это фрэймворк, который позволяет создавать нетривиальные JavaScript приложения, используя парадигму MVC. Не в самом строгом виде, но позволяющую удобным образом организовать код.
Underscore - это утилита, позволяющая более удобным образом работать с JavaScript объектами; применять к ним расширенные функции работы с массивами, коллекциями, функциями и объектами.
jQuery, думаю, в представлении не нуждается.
Начинаем
В первую очередь, нам нужно создать каталоги для хранения изображений и js файлов. Начнём со следующей структуры:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Backbone.js Web App</title> <link rel="stylesheet" href="/css/screen.css" /> </head> <body> <div id="contacts"></div> <script src="/js/jquery-1.7.1.min.js"></script> <script src="/js/Underscore-min.js"></script> <script src="/js/Backbone-min.js"></script> <script src="/js/app.js"></script> </body> </html>
Сохраняем её в фале 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: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "family" }, { name: "Contact 2", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "family" }, { name: "Contact 3", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "friend" }, { name: "Contact 4", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "colleague" }, { name: "Contact 5", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "family" }, { name: "Contact 6", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "colleague" }, { name: "Contact 7", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", type: "friend" }, { name: "Contact 8", address: "1, a street, a town, a city, AB12 3CD", tel: "0123456789", email: " Этот e-mail адрес защищен от спам-ботов, для его просмотра у Вас должен быть включен Javascript ", 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() для передачи нужного шаблона. В ответ возвращается метод, который мы можем вызвать, чтобы использовать шаблон.
Далее передаём контент элемента <article> на вывод, с помощью jQuery метода html(). Делается это благодаря методу template() Underscor-а. Данные из модели пропускаем через метод toJSON() Backbone. Заметьте, что мы используем $el, для того чтобы задать HTML контент. Это закэшированный jQuery объект.
В конце метода render() мы возвращаем объект this, отражающий наше представление.
Микро шаблоны Underscore
Теперь неплохо было посмотреть на процесс создания микро шаблона Underscore. Тут нам доступен метод template() для работы с шаблоном. В HTML код страницы запишем следующий код:
<script id="contactTemplate" type="text/template"> <img src="/<%= photo %>" alt="<%= name %>" /> <h1><%= name %><span><%= type %></span></h1> <div><%= address %></div> <dl> <dt>Tel:</dt><dd><%= tel %></dd> <dt>Email:</dt><dd><a href="mailto:<%= email %>"><%= email %></a></dd> </dl> </script>
Тут мы юзаем элемент <script> с аттрибутом id для того, чтобы было легче его выбрать; а также собственное значение атрибута type, чтобы браузер автоматом его не выполнил. В самом шаблоне мы определяем HTML структуру блока и выводим информацию, с помощью подобных маркеров <%= model_property_name %>. В дальнейших уроках мы рассмотрим и другие возможности.
Базовый шаблон
Чтобы завершить логическую цепочку данного урока, давайте создадим ещё одно представление. В отличие от предыдущего представления, оно будет относиться не к модели 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); } });
Данное представление будет прикреплено к элементу, который уже существует на странице; контейнер, который мы захард-кодировали в <body>. Выберем его через через свойство el. При реализации метода initialize(), который создаст объект класса нашей коллекции, мы вызовем метод render() для обработки шаблона.
Затем метод render() займётся базовым шаблоном. В функцию мы передадим объект, указывающий на представление, которое мы заюзаем в функции обратного вызова, а затем воспользуемся конструкцией each Underscor-а, чтобы пройтись по записям модели в нашей коллекции.
В функцию each передаём два аргумента (вообще, можно и один); первый - это коллекция, по которой проходимся; второй - анонимная функция, где будем обрабатывать каждый объект. Эта функция будет принимать один аргумент - текущий объект модели. Всё что нам нужно будет написать внутри, так это метод renderContact() и передать текущий объект модели.
В последнюю очередь нам нужно определить метод renderContact(). Тут нам нужно создать новый объект класса ContactView (помните, что класс ContactView представляет собой каждый отдельный контакт и содержится в поле model). Затем мы присоединяем сгенерированный код к базовому шаблону. Получаем доступ к нему через $el, который генерируется автоматом самим Backbone.
Главный шаблон ответственен за вывод всех записей. Всё что нам нужно сделать, так это его инициализировать.
var directory = new DirectoryView();
При запуски приложения в браузере, увидим следующее:
Backbone создаст объект модели для каждого элемента массива, а затем будет осуществлён вывод на экран.
CSS оформления в данной серии уроков мы касаться не будем.
Итог
В этом уроки мы затронули фундаментальные сновы Backbone.js: модели, коллекции, представления. Модель - это класс, который создаётся для каждого объекта, представляющего ячейку информации, и формирует поведение. Коллекции предназначены для управления группами моделей и представлений.
В следующем уроке рассмотрим реализацию фильтра данных, а также компонент для создания маршрутов.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Ww8QzjUBiqs/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
- 2024-01-18 » Мифический человеко-DevOps
- 2023-12-28 » Google подвел итоги 2023 года в поиске
- 2023-12-28 » 5 ошибок отдела продаж, из-за которых вы теряете клиентов
- 2023-12-28 » Американский суд признал монополию Google на рынках дистрибуции Android-приложений
- 2023-12-28 » Хостинг-провайдер GoDaddy перестанет оказывать услуги пользователям из России
Если ты рождён без крыльев, не мешай им расти. (Коко Шанель / ЖИТЕЙСКАЯ МУДРОСТЬ ) |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.