Стартуем с Ember.js (Часть 1)
На данный момент существует огромное множество JavaScript библиотек, предназначенных для манипулирования DOM-ом. Однако когда речь заходит о необходимости построения одно-страничного приложения, многие фрэймворки сдуваются.
Такие библиотеки, как jQuery не то чтобы не могут быть использованы для построения сложных одно-страничных приложений. Просто-напросто они создавались для других целей и могут управлять состояниями интерфейсами и маршрутами только с помощью специальных плагинов. Согласитесь, что это не самое лучшее решение. По-моему, для решения задачи нужно пользоваться подходящими для этого инструментами.
Ember.js - это как раз то, что нам нужно, если речь идёт о сложных одно-страничных приложениях. С его помощью, можно не усложняя себе жизнь, создавать сложные приложения. В его основу разработчики заложили возможность работы по принципу MVC.
Главной целью данных статей будет знакомство с Ember.js, его различным сторонами и возможностями. Сегодня мы начнём с общих понятий, но в дальнейшем приступим к реализации примеров.
Давайте же приступим!
Основы
Первое, что вы должны понять, так это то, что Ember.js - это фрэймворк для создания нетрадиционных сайтов. Такие фрэймворки, как jQuery и Mootools, больше подходят для классических сайтов. Приложения, создаваемые на основе Ember.js, больше похожи на настольные приложения.
Как я уже упоминал ранее, Ember.js использует MVC в качестве системы распределения кода. Если совсем ничего не знаете о MVC, то вам нужно прочитать самую простую статью, где описывается работа по данной схеме. Если вы когда-то использовали Backbone.js, то понять Ember.js вам не составит труда.
В Ember.js очень часто используются шаблоны, которые работают на базе библиотеки Handlebars. С её помощью мы можем писать шаблоны для генерации динамического HTML кода. Средствами Ember.js мы будем передавать в шаблон данные. Ниже приведён пример шаблона вывода пользователей в ненумерованном списке:
<ul> {{#each people}} <li>Hello, {{name}}!</li> {{/each}} </ul>
Ключевое слово #each означает обычный цикл, в котором будут прокручиваться записи из переменной people. Выражениями типа {{name}}, мы будем извлекать нужную информацию. Более сложные примеры, мы разберём позже.
Handlebars - это действительно хороший шаблонизатор, который может использоваться отдельно от Ember.js. На их официальном сайте вы можете найти дополнительную информацию.
Настройка Ember
Ember.js работает на основе других библиотек, так что вам нужно будет подключить jQuery и Handlebars. Стоп! Не я ли ранее сказал что jQuery и Ember предназначены для разных целей? Да, но на самом деле ситуация выглядит несколько иначе: команда разработчиков решила не изобретать колесо. Они выбрали jQuery, для того чтобы с его помощью делать то, что у него лучше всего получается: манипулировать DOM-ом. Подобными мыслями они руководствовались при подключении Handlebars.
На самом деле, вам не нужно бегать по разным сайтам за нужными ссылками библиотек. Всё нужное вы сможете найти на странице Ember.js на гитхабе. Качаем Starter-kit и получаем:
- Ember 1.0 RC1
- Handlerbars 1.0 RC3
- jQuery 1.9.1
Все эти файлы сразу распределены по папкам. Для нашего приложения лучше всего создать собственный файл. Назовём его app.js:
<script src="/js/libs/jquery-1.9.1.js"></script> <script src="/js/libs/handlebars-1.0.0-rc.3.js"></script> <script src="/js/libs/ember-1.0.0-rc.1.js"></script> <script src="/js/app.js"></script>
Возможности Ember
Прежде чем писать какой-то код, лучше сначала узнать основные возможности Ember.js
Шаблоны
Как я уже говорил ранее, при работе с Ember часто используются шаблоны. Вот пример подключения шаблона:
<script type="text/x-handlebars"> <h2><strong>{{firstName}} {{lastName}}</strong></h2> </script>
Всё это мы пишем непосредственно в HTML документе. Затем, при запуске страницы Ember запустит свои механизмы, и все шаблоны заполнятся информацией. В этом примере мы выводим значения двух переменных: {{firstName}} и {{lastName}}.
Маршруты
Маршрутизатор помогает реагировать на изменение состояния приложения и подключать нужные ресурсы, в зависимости от навигации по странице. Возможные операции: извлечение данных из модели, передача в контроллеры, представления и шаблоны.
Маршрутизация осуществляется путём создания маршрутов для специфических частей вашего приложения. Маршруты определяют разделы вашего приложения, а также url, ассоциированные с ними. URL - это ключевой объект для определения, какое состояние приложению нужно отобразить пользователю.
App.Router.map( function() { this.route( 'about' ); // Takes us to "/about" });
Поведение маршрута (передача данных из модели) определяется при помощи глобального объекта Ember, отвечающего за навигацию по приложению. Пример извлечения данных из модели выглядит следующим образом:
App.EmployeesRoute = Ember.Route.extend({ model: function() { return App.Employee.find(); } });
Как только пользователь перейдёт по адресу “/employees”, то маршрутизатор сделает обращение к модели и вытащит список работников.
Модели
Модели предназначены для приёма или возврата объектных представлений данных, которые используются в нашем приложении. Это может быть просто массив или JSON ответ от стороннего PHP файла. Библиотека Ember Data предоставляет хороший API для маппинга и обновления данных.
Контроллеры
Контроллеры предназначены для хранения объектов и взаимодействия с моделями. Они действуют как посредники, обращаясь к модели и передавая данные в представления и шаблоны. Шаблоны всегда должны быть подключены к контроллеру.
Вы должны хорошо понять, что контроллер предназначен для распространения данных, которые он получает из модели.
В контроллерах вы можете записывать и другие данные, которые нужны приложению, но не должны отправляться на серверную часть для хранения.
Представления
В рамках Ember.js представления предназначены для отслеживания событий, совершаемых пользователем, и трансформации их в то, что нужно для реагирования вашего приложения. Если пользователь кликнул по кнопке, чтобы удалить контакт, представление отследит это событие и сообщит приложению, в какое состояние ему нужно перейти.
Правила именованияp
Используя Ember.js, можно сократить количество кода за счёт установленной для себя системы именования объектов. В зависимости от того, как вы назовёте маршрут, зависит имя контроллера, модели, представления и шаблона. К примеру, мы создали маршрут “employees”:
App.Router.map( function() { this.resource( 'employees' ); });
Я назову свои компоненты следующим образом:
- Маршрут: App.EmployeesRoute
- Контроллер: App.EmployeesController
- Модель: App.Employee
- Представление: App.EmployeesView
- Шаблон: employees
Подобное правило именования удобно по нескольким причинам. Во-первых, мы сразу же видим семантическую связь между компонентами. Во-вторых, Ember сможет самостоятельно создать объекты, которых будет не хватать. Всё это возможно при инициализации приложения:
var App = Ember.Application.create();
Одна строчка задаёт отношения между контроллерами, объектами, представлениями и шаблонами:
- Маршрут: App.ApplicationRoute
- Контроллер: App.ApplicationController
- Представление: App.ApplicationView
- Шаблон: application
При навигации на адрес “/employees”, Ember активирует другие ресурсы:
- App.EmployeesRoute
- App.EmployeesController
- шаблон employees
Если таковых объектов в приложении нет, Ember создаст их, но ничего не выведет до тех пор, пока вы не создадите модель, которая вернёт данные для вывода. Вот почему правила именования компонентов очень важны. Оно поможет Ember определить, каике ресурсы подключать без ручной настройки.
Что дальше?
На сегодня всё. Мы познакомились с Ember.js и её компонентами. В следующих частях этой серии статей займёмся практическим использованием данной библиотеки и на практике попробуем многое из того, что предоставляет нам Ember.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/j0EZVbkSxsc/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-09-30 » Как быстро запустить Laravel на Windows
- 2024-09-25 » Next.js
- 2024-09-05 » OpenAI рассказал, как запретить ChatGPT использовать содержимое сайта для обучения
- 2024-08-28 » Чек-лист: как увеличить конверсию интернет-магазина на примере спортпита
- 2024-08-01 » WebSocket
- 2024-07-26 » Интеграция с Яндекс Еда
- 2024-07-26 » Интеграция с Эквайринг
- 2024-07-26 » Интеграция с СДЕК
- 2024-07-26 » Интеграция с Битрикс-24
- 2024-07-26 » Интеграция с Travelline
- 2024-07-26 » Интеграция с Iiko
- 2024-07-26 » Интеграция с Delivery Club
- 2024-07-26 » Интеграция с CRM
- 2024-07-26 » Интеграция с 1C-Бухгалтерия
- 2024-07-24 » Что такое сторителлинг: техники и примеры
- 2024-07-17 » Ошибка 404: что это такое и как ее использовать для бизнеса
- 2024-07-03 » Размещайте прайс-листы на FarPost.ru и продавайте товары быстро и выгодно
- 2024-07-01 » Профилирование кода в PHP
- 2024-06-28 » Изучаем ABC/XYZ-анализ: что это такое и какие решения с помощью него принимают
- 2024-06-17 » Зачем вам знать потребности клиента
- 2024-06-11 » Что нового в работе Яндекс Метрики: полный обзор обновления
- 2024-06-11 » Поведенческие факторы ранжирования в Яндексе
- 2024-06-11 » Скорость загрузки сайта: почему это важно и как влияет на ранжирование
- 2024-05-27 » Подборка сервисов для расшифровки аудио в текст
- 2024-05-27 » PostgreSQL 16. Изоляция транзакций. Часть 2
- 2024-05-06 » Как настраивать конверсионные стратегии: работа над ошибками
- 2024-04-22 » Комментирование кода и генерация документации в PHP
- 2024-04-22 » SEO в России и на Западе: в чем основные отличия
- 2024-04-22 » SEO для международного масштабирования
- 2024-04-22 » Как использовать XML-карты для продвижения сайта
Кто мало хочет, тот дешево стоит |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.