Информационный портал по безопасности. Создание компонента пользовательского интерфейса. Создание модульных компонент

Сложный в обучении. Хотя даже не так. Концепты Ember.js сложны в освоении и понимании. Мне кажется, что любой курс обучния Ember.js должен начинатся с этих слов.

Я разработчик работающий с Ruby on Rails (до этого я программировал в.NET и Python). Для меня было довольно проблематично понять магию заставляющею Ember.js работать. Я иногда общаюсь с другими начинающими разработчиками вставшими (или пытающимися встать) на путь Ember.js - все их проблемы начинаются из за того что они не понимают как устроен данный фреймворк.

Да, с одной стороны есть официальная документация в которой детально описаны все аспекты данного фреймворка. Но ей не хватает концепции; для начинающего разработчика это просто осколки информации разбросанные случайным способом. Из документации, например, можно узнать что у нас есть в арсенале контроллеры, модели и виды (controller, model, view). Но для того что-бы узнать за что они отвечают и как работают начинающему разработчику предлагают сначала наступить на грабли пару десятков раз. Плюс в нагрузку к контроллерам, моделям и видам Ember.js нам дает целый взвод разношерстых объектов типа компонентов, шаблонов, маршрутизатора и путей (component, template, router, route).

Но обо всем по порядку. Давайте же начнем наше обучение Ember.js с того, что запомним, что это не MVC (model-view-controller) фреймворк; забудьте про это. Да, в Ember.js есть контроллеры, модели и виды–шаблоны, но на этом его схожесть с MVC фреймворками заканчивается. Ember.js это фреймворк для написания приложений работающих в браузере пользователя.

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

Состояния вашего приложения описываются с помощью адреса который вы задаете в адресную строку вашего браузера. С помощью адреса вы можете сохранять состояние вашего приложения или даже делится состоянием с другими пользователями например послав коллеге ссылку на конкретную задачу в вашем баг-трекере (приложение показывает задачу - это его состояние).

Итак представьте себе что приложение написанное на Ember.js получает информацию о том, что адрес в адресной строке был изменен. Маршрутизатор перехватывает эту информацию и пытается сам разобраться что с ней дальше делать.

НЛО (небольшое лирическое отступление): Ember.js работает по двум принципам. Правила превыше конфигураций (convention over configuration) и если Ember.js не находит ожидаемый объект, то он его создает сам на основе своих внутренних правил. Тут стоит отметить способ работы генератора кода Ember.js. Наверное вы знакомы с генераторами в других фреймворках: они создают файл с кодом и сохраняют его на вашем диске. В отличии от других фреймворков, генератор кода в Ember.js создает объект только тогда когда он ему нужен и держит его в памяти. После того как объект становится не нужным, Ember.js его уничтожает - этот принцип освобождает вас от ненужной поддержки шаблонного кода.

Продолжим. Допустим пользователь запросил путь /posts. Маршрутизатор на основе этого запроса будет пытаться найти следующий объект в цепочке по его названию - путь. Как вы наверное уже догадались, Ember.js будет искать объект типа Route с названием PostsRoute. Путь в Ember.js является ответственным за предоставление модели контроллеру.

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

После того, как путь забирает данные, он отдает их контроллеру. Контроллер в данном случае будет называться PostsController. Стоит заметить, что между контроллером и моделью нет прямой связи; они не знают друг о друге и контроллеру в принципе без разницы какую модель вы ему отдадите. Контроллер всего-лишь декоратор данных - он их обрабатывает перед тем как отдать пользователю.

Затем Ember.js обработанные данные забирает у контроллера и отдает их шаблону. Но есть еще один объект, который находится между контроллером и шаблоном - вид. Именно вид, который в нашем случае будет называться PostsView, говорит Ember.js какой шаблон надо использовать для данного запроса. По правилам Ember.js будет использовать шаблон с названием posts.

Обратная связьПользователи могут взаимодействовать с нашим приложением (тыкать по кнопкам, перетаскивать элементы и пакостить разработчику другими доступными пользователю способами). Ember.js различает два вида взаимодействия пользователя с приложением. Первый это т.н. нативные события браузера - click, drag, drop, mouseEnter, mouserLeave и так далее. Второй способ это события которые имеют имя. Второй тип события в основном запускается по щелчку на элемент на котором определенно данное событие.

Так в чем-же разница, спросите вы? Ну или хотели спросить. Первый тип событий обрабатывается исключительно видом; Ember.js без разницы на какую кнопку нажмет пользователь, главный сам факт того что нажатие произошло. Второй тип срабатывает только после нажатия на конкретный элемент и обрабатывается контроллером. Если контроллер не может обработать событие, Ember.js пытается обработать событие в пути (Route Object) и только потом сообщает об ошибке.

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

На данный момент вы уже знаете, что у шаблона есть контекст - модель, контроллер и вид.

Начнем с частичных шаблонов (partial). Это самый простой объект который вы можете вкладывать в ваши шаблоны (хотя объект наверно слишком громкое имя для частичных шаблонов). Ember.js просто возьмет указанный вами шаблон и представит его в родительском шаблоне; при этом будет использован контекст родителя - т.е. в частичном шаблоне у вас будет доступ к модели, контроллеру и виду родителя. Проще говоря все события будут обрабатываться видом и контроллером родителя.

Вид и компонент довольно похожи друг на друга (по правде сказать вид это родительский класс компонента). Вид и компонент оба имеют свой собственный шаблон. За видом и компонентом находится свой собственный объект. Разница заключается в двух ключевых моментах. Во первых обработка событий - компонент сам обрабатывает именные события а вид просто напросто отдает их родительскому шаблону который в свою очередь отдает их контроллеру. Во вторых окружение - компонент полностью изолирован и может работать только с объектами которые вы ему отдадите; вид в свою очередь имеет доступ ко всем объектам доступным родительскому шаблону. С точки зрения контекста родительского шаблона вид имеет доступ к модели и контроллеру но имеет свой собственный вид. Компонент более изолированный и не имеет доступ ни к чему.

Последний элемент это рендер (render). Он самый сложный из всех объектов доступных в шаблонах. Когда вы вызываете в шаблоне рендер, то вам надо предоставить ему два параметра - название шаблона и модель. Ember.js найдет шаблон и на основании названия шаблона найдет контроллер и вид. Затем он отдаст контроллеру модель и после того как контроллер обработает модель, Ember.js вставит ее в шаблон. Проще говоря с помощью рендера вы можете на одной странице собрать несколько независимых друг от друга шаблонов с абсолютно разным контекстом; рендер не имеет доступ к контексту родительского шаблона (вместо этого рендер имеет свой собственный контекст) и все события будут обрабатываться с помощью вида и контроллера рендера.

Надеюсь что вам понравилось теоретическое знакомство с Ember.js. Если Ember.js вас заинтересовал то вы можете продолжить знакомится с ним прочитав официальный

• Перевод

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Я считаю себе довольно хорошим разработчиком… далеко не лучшим, но я умею работать с существующими технологиями, которые применяю в своих разработках. Я следил за этими фреймворками и мне подошли Backbone и Ember. Я игрался с Backbone, даже купил видео-учебник по нему. Он хороший, но мне до сих пор трудно заставить себя мыслить как он. Я услышал об Ember всего несколько месяцев назад и он все набирает обороты. Он предлагает множество функций, которые мне нужны и я решил посмотреть, насколько он мне подходит. Ember предоставляет несколько ключевых фич, которые мне кажутся очень привлекательными, главной из которых является привязка данных. Вы просто создаете переменную, и, когда значение этой переменной изменяется, обновляется любая часть вашего приложения, которая следит за этой переменной. Это нашло бы свое применение, например, в чатах и т. д.

На данный момент главный недостаток Ember по сравнению с Backbone в том, что у последнего есть множество учебников, статей и готовых проектов на Github. В то время, как по Ember вы можете найти совсем немного материалов в сети, которые сразу показывают все его внутренности, но упускают самые основы. Так что моя цель – написать туториал, который поможет начать вам использовать Ember уже сейчас. Ну и кроме всего прочего я пишу эту статью, чтобы закрепить свои собственные знания.

Ember.js построен на архитектуре MVC (Model-View-Controller) и вы просто должны разделять свой код на 3 части:

• M = Модель – похожа на массив. Здесь хранятся данные, которые будут использоваться вашим приложением.
• V = Представление – это визуальная часть вашего приложения - формы, списки и т. д.
• C = Контроллер – думайте о контроллере, как о регулировщике движения. Он управляет взаимодействием между другими частями приложения. Когда пользователь нажимает на кнопку, контроллер определяет, какое представление должно быть загружено, которое в свою очередь определяет, какую модель использовать для сохранения данных.

Ну что, начнем? Для начала скачайте Ember.js Starter Kit . Распакуйте его в директорию, у которой есть доступ с веб-браузера. Откройте index.html и js/app.js в вашем любимом текстовом редакторе. В app.js добавьте следующую строку:

Welcome = Ember.Application.create();

Поздравляю! Вы создали свое первое приложение на Ember! Откройте index.html в вашем браузере и придите в восторг от вашего нового сайта. Ой, постойте, там же ничего нет… что вы думаете по этом поводу? Ничего не появилось кроме заголовка и это прекрасно. Все что произошло – это то, что Ember создал приложение, которое вы будете использовать на протяжении всего урока. Некоторые разработчики предпочитают называть это пространством имен. Это просто означает, что все другие части вашего приложения будут начинаться с имени, которое вы выбрали. Это помогает избежать конфликта имен переменных и держит все в порядке.

Есть одна вещь, к которой большинство jQuery-разработчиков очень привыкли – старый добрый document.ready . Ember предлагает нечто подобное, принимая необязательный объект в метод create . Добавьте код, перезагрузите страницу и вы должны увидеть поздравление. Погладьте себя по голове… вы это заслужили!

Welcome = Ember.Application.create({ ready: function(){ alert("Вы сделали это!"); } });

Следующее, что нам нужно сделать – это добавить Модель. Каждое приложение на Ember может иметь множество моделей и каждая из них – это уникальный тип данных. В некоторых фреймворках модель представляется в виде класса. В общем, это просто структура, которая говорит нам, как работать с этим объектом. Давайте создадим модель для некоторых из моих любимых книг.

Welcome.Book = Ember.Object.extend({ title: null,

Следующее, что нам нужно – это контроллер. Кстати, кроме управления приложением, контроллеры в Ember так же передают данные из модели в представление. Вот простой контроллер на Ember:

Welcome.booksController = Ember.ArrayController.create();

Несовсем похоже на создание контроллера, но здесь создается ArrayController, который содержит массив. Именно здесь будет сохраняться информация о наших книгах. Она там, вы просто не видите ее. Вы можете явно указать содержимое массива, или, например, заполнить его. Это осуществляется путем передачи необязательного объекта метод create:

Welcome.booksController = Ember.ArrayController.create({ content: });

Теперь у нас есть модель и контроллер – осталось только написать представление. Помните, я говорил, что представление – визуальная часть вашего приложения? Значит это будет находится в файле index.html . Давайте сначала напишем наше представление, а потом обсудим его. Прямо под тег H1 добавьте следующее:
{{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} {{content.title}} - {{content.author}}, {{content.genre}} {{/collection}}

Одна из замечательных особенностей Ember – это то, что он поставляется с встроенным шаблонизатором Handlebars. По сути шаблоны являются ключевой магией Ember. Обычно в шаблонах вы окружаете переменную какой-то строкой. В Handlebars это 2 фигурные скобки.

Ember начал свое существование как билиотека SproutCore, разработанная в Apple, как ядро для их онлайн-приложений, таких как Mobile Me. SproutCore также включал в себя набор виджетов, которых нет в Ember. Ember включает в себя только предоставления для элементов форм, потому что они могут быть очень динамичными. В случае нашего шаблона, или представления, мы используем кнопки Ember. Это позволяет ему сделать всю тяжелую работу за нас. Он принимает цель (в нашем случае – booksController) и дейстие. Поэтому, когда кто-то нажимает на кнопку, Ember будет работать с методом loadBooks объекта Welcome.booksController .

Вторая часть немного сложнее, но я уверен, что вы разберетесь. В Ember коллекция – это просто указатель на группу данных, в нашем случае это опять Welcome.booksController . В начале статьи я писал, что связанные данные – одна из причин, по которой Ember меня заинтересовал. И здесь мы можем увидеть всю его мощь. Content просто указывает на переменную content в booksController , в то время, как Binding является той самой волшебной пылью. Добавление Binding к концу большинства атрибутов говорит Ember о том, что вы хотите сделать двустороннее связывание. Вы изменяете значение на одной стороне, а другая будет обновляться. Наконец, коллекции позволяют установить базовый тег, в нашем случае это просто маркированный список (тег UL).

Кстати, символы # и / говорят Handlebars о том, что это только часть (блок) представления.

Внутри коллекции находится “мясо” наших шаблонов. Обратите внимание, как мы смешиваем HTML и теги внутри наших шаблонов. Удобно, не правда ли? Друга тонкость состоит в том, что Ember не нуждается в явном указании открывающих или закрывающих тегов для списка. Он добавит их автоматически, потому что знает, что мы используем маркированный список. Запустите приложение и вы увидите одинокую кнопку, которой нужны друзья. Нажатие кнопки делает ее несчастной, т. к. у нас еще нет метода loadBooks . Как насчет того, чтобы добавить его и загрузить немного данных?

Welcome.booksController = Ember.ArrayController.create({ content: , loadBooks: function(){ var self = this; $.getJSON("data/books.json", function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } });

Помните, мы говорили, что модели могут содержать произвольные методы? Все в Ember может содержать произвольный код, в том числе и ArrayController . Теперь, когда вы загрузите свою страницу и нажмете кнопку “Load Books” - будет вызван метод loadBooks , который загрузит некоторые из моих любимых книг. Вот и все для этого простого примера. Я надеюсь, что вам понравилось и вы дадите Ember шанс. Вы можете

В наши дни сложные Javascript-приложения можно увидеть повсюду. Со временем они становятся все сложнее и уже неприемлемо просто писать цепочку callback-функций на jQuery. Javascript-программисты постепенно узнают то, что обычные разработчики знали уже несколько десятилетий. Организация и эффективность может сыграть важную роль при разработке. Таким образом, такие MVC-фреймворки на Javascript, как Backbone, Knockout и Ember появились для того, чтобы заполнить пустоту между начинающими, средними и опытными разработчиками. Они предлагают разные возможности и функционал, который подойдет разным людям, в зависимости от их потребностей.

Я считаю себе довольно хорошим разработчиком… далеко не лучшим, но я умею работать с существующими технологиями, которые применяю в своих разработках. Я следил за этими фреймворками и мне подошли Backbone и Ember. Я игрался с Backbone, даже купил видео-учебник по нему. Он хороший, но мне до сих пор трудно заставить себя мыслить как он. Я услышал об Ember всего несколько месяцев назад и он все набирает обороты. Он предлагает множество функций, которые мне нужны и я решил посмотреть, насколько он мне подходит. Ember предоставляет несколько ключевых фич, которые мне кажутся очень привлекательными, главной из которых является привязка данных. Вы просто создаете переменную, и, когда значение этой переменной изменяется, обновляется любая часть вашего приложения, которая следит за этой переменной. Это нашло бы свое применение, например, в чатах и т. д.

На данный момент главный недостаток Ember по сравнению с Backbone в том, что у последнего есть множество учебников, статей и готовых проектов на Github. В то время, как по Ember вы можете найти совсем немного материалов в сети, которые сразу показывают все его внутренности, но упускают самые основы. Так что моя цель – написать туториал, который поможет начать вам использовать Ember уже сейчас. Ну и кроме всего прочего я пишу эту статью, чтобы закрепить свои собственные знания.

Ember.js построен на архитектуре MVC (Model-View-Controller) и вы просто должны разделять свой код на 3 части:

• M = Модель – похожа на массив. Здесь хранятся данные, которые будут использоваться вашим приложением.
• V = Представление – это визуальная часть вашего приложения - формы, списки и т. д.
• C = Контроллер – думайте о контроллере, как о регулировщике движения. Он управляет взаимодействием между другими частями приложения. Когда пользователь нажимает на кнопку, контроллер определяет, какое представление должно быть загружено, которое в свою очередь определяет, какую модель использовать для сохранения данных.

Ну что, начнем? Для начала скачайте Ember.js Starter Kit . Распакуйте его в директорию, у которой есть доступ с веб-браузера. Откройте index.html и js/app.js в вашем любимом текстовом редакторе. В app.js добавьте следующую строку:

Welcome = Ember.Application.create();

Поздравляю! Вы создали свое первое приложение на Ember! Откройте index.html в вашем браузере и придите в восторг от вашего нового сайта. Ой, постойте, там же ничего нет… что вы думаете по этом поводу? Ничего не появилось кроме заголовка и это прекрасно. Все что произошло – это то, что Ember создал приложение, которое вы будете использовать на протяжении всего урока. Некоторые разработчики предпочитают называть это пространством имен. Это просто означает, что все другие части вашего приложения будут начинаться с имени, которое вы выбрали. Это помогает избежать конфликта имен переменных и держит все в порядке.

Есть одна вещь, к которой большинство jQuery-разработчиков очень привыкли – старый добрый document.ready . Ember предлагает нечто подобное, принимая необязательный объект в метод create . Добавьте код, перезагрузите страницу и вы должны увидеть поздравление. Погладьте себя по голове… вы это заслужили!

Welcome = Ember.Application.create({ ready: function(){ alert("Вы сделали это!"); } });

Следующее, что нам нужно сделать – это добавить Модель. Каждое приложение на Ember может иметь множество моделей и каждая из них – это уникальный тип данных. В некоторых фреймворках модель представляется в виде класса. В общем, это просто структура, которая говорит нам, как работать с этим объектом. Давайте создадим модель для некоторых из моих любимых книг.

Welcome.Book = Ember.Object.extend({ title: null, author: null, genre: null });

Следующее, что нам нужно – это контроллер. Кстати, кроме управления приложением, контроллеры в Ember так же передают данные из модели в представление. Вот простой контроллер на Ember:

Welcome.booksController = Ember.ArrayController.create();

Несовсем похоже на создание контроллера, но здесь создается ArrayController, который содержит массив. Именно здесь будет сохраняться информация о наших книгах. Она там, вы просто не видите ее. Вы можете явно указать содержимое массива, или, например, заполнить его. Это осуществляется путем передачи необязательного объекта метод create:

Welcome.booksController = Ember.ArrayController.create({ content: });

Теперь у нас есть модель и контроллер – осталось только написать представление. Помните, я говорил, что представление – визуальная часть вашего приложения? Значит это будет находится в файле index.html . Давайте сначала напишем наше представление, а потом обсудим его. Прямо под тег H1 добавьте следующее:

{{#view Ember.Button target="Welcome.booksController" action="loadBooks"}} Load Books {{/view}} {{#collection contentBinding="Welcome.booksController" tagName="ul"}} {{content.title}} - {{content.author}}, {{content.genre}} {{/collection}}

Одна из замечательных особенностей Ember – это то, что он поставляется с встроенным шаблонизатором Handlebars. По сути шаблоны являются ключевой магией Ember. Обычно в шаблонах вы окружаете переменную какой-то строкой. В Handlebars это 2 фигурные скобки.

Ember начал свое существование как билиотека SproutCore, разработанная в Apple, как ядро для их онлайн-приложений, таких как Mobile Me. SproutCore также включал в себя набор виджетов, которых нет в Ember. Ember включает в себя только предоставления для элементов форм, потому что они могут быть очень динамичными. В случае нашего шаблона, или представления, мы используем кнопки Ember. Это позволяет ему сделать всю тяжелую работу за нас. Он принимает цель (в нашем случае – booksController) и дейстие. Поэтому, когда кто-то нажимает на кнопку, Ember будет работать с методом loadBooks объекта Welcome.booksController .

Вторая часть немного сложнее, но я уверен, что вы разберетесь. В Ember коллекция – это просто указатель на группу данных, в нашем случае это опять Welcome.booksController . В начале статьи я писал, что связанные данные – одна из причин, по которой Ember меня заинтересовал. И здесь мы можем увидеть всю его мощь. Content просто указывает на переменную content в booksController , в то время, как Binding является той самой волшебной пылью. Добавление Binding к концу большинства атрибутов говорит Ember о том, что вы хотите сделать двустороннее связывание. Вы изменяете значение на одной стороне, а другая будет обновляться. Наконец, коллекции позволяют установить базовый тег, в нашем случае это просто маркированный список (тег UL).

Кстати, символы # и / говорят Handlebars о том, что это только часть (блок) представления.

Внутри коллекции находится “мясо” наших шаблонов. Обратите внимание, как мы смешиваем HTML и теги внутри наших шаблонов. Удобно, не правда ли? Друга тонкость состоит в том, что Ember не нуждается в явном указании открывающих или закрывающих тегов для списка. Он добавит их автоматически, потому что знает, что мы используем маркированный список. Запустите приложение и вы увидите одинокую кнопку, которой нужны друзья. Нажатие кнопки делает ее несчастной, т. к. у нас еще нет метода loadBooks . Как насчет того, чтобы добавить его и загрузить немного данных?

Welcome.booksController = Ember.ArrayController.create({ content: , loadBooks: function(){ var self = this; $.getJSON("data/books.json", function(data) { data.forEach(function(item){ self.pushObject(Welcome.Book.create(item)); }); }); } });

Помните, мы говорили, что модели могут содержать произвольные методы? Все в Ember может содержать произвольный код, в том числе и ArrayController . Теперь, когда вы загрузите свою страницу и нажмете кнопку “Load Books” - будет вызван метод loadBooks , который загрузит некоторые из моих любимых книг. Вот и все для этого простого примера. Я надеюсь, что вам понравилось и вы дадите Ember шанс. Вы можете скачать исходный код примера на Github .

Подождите еще минутку. Если вы похожи на меня, то у вас остались вопросы. Много вопросов. Я написал эту статью потому, что были вопросы и у меня ушли часы на поиск ответов. На самом деле ответы на большинство вопросов, которые у меня были освещены в этой статье. Если у вас еще остались вопросы, то вы можете . Если я не знаю ответа, то я его найду и отвечу вам.

На данный момент существует огромное множество 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 мы будем передавать в шаблон данные. Ниже приведён пример шаблона вывода пользователей в ненумерованном списке:

{{#each people}}
• Hello, {{name}}!
{{/each}}

Ключевое слово #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:

Возможности Ember

Прежде чем писать какой-то код, лучше сначала узнать основные возможности Ember.js

Шаблоны

Как я уже говорил ранее, при работе с Ember часто используются шаблоны. Вот пример подключения шаблона:

{{firstName}} {{lastName}}

Всё это мы пишем непосредственно в 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 представления предназначены для отслеживания событий, совершаемых пользователем, и трансформации их в то, что нужно для реагирования вашего приложения. Если пользователь кликнул по кнопке, чтобы удалить контакт, представление отследит это событие и сообщит приложению, в какое состояние ему нужно перейти.

Правила именования

Используя 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.