Стартуем с Ember.js: следующий шаг (часть 2)

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

Простое приложение

Для начала нам нужно скачать и подключить к странице все нужные файлы для работы Ember. Как я говорил в прошлой статье, найти все нужные файлы можно на Github.

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

Открыв файл index.html, вы должны увидеть следующее:

Welcome to Ember.js

Ничего сверхъестественного, я знаю. Давайте теперь посмотрим на код. Если вы откроете файл “js/app.js”, то увидите следующее:

App = Ember.Application.create({});

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

Для инициализации приложения следует выполнить следующую строку:

App = Ember.Application.create({});

Это настраивает шаблон по умолчанию, обработчики событий и рутер.

Следующий код отвечает за настройку рутера. В данном примере, для index.html:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

Рутер использует URL, для того чтобы определить, какое состояние приложения нужно отобразить пользователю.

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

App.Router.map( function() {
    this.resource( 'index', { path: '/' } ); // Переносит нас на "/"
});

Данный код определяет корневой URL нашего приложения. В дальнейшем, мы более подробно рассмотрим работу с рутером.

Давайте вернёмся к следующему коду:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

В случае, если пользователь направится в корень нашего приложения, Ember настроит контроллер, который загружает в приложение контент, доступный по ключу content. В дальнейшем, по этому ключевому слову мы сможем доставать эти данные в других частях приложения. Теперь давайте посмотрим, что происходит в index.html:

<script type="text/x-handlebars" data-template-name="index">
<h2>Welcome to Ember.js</h2>
<ul>
{{#each item in model}}
    <li>{{item}}</li>
{{/each}}
 </ul>
</script>

Это пример использования шаблонизатора Handlebars, для вывода данных на страницу приложения. Ember считывает атрибуты data-*, и в зависимости от этого, вызывает соответствующий контроллер с данными.

В конце прошлой статьи я писал о важности правил именования ресурсов Ember для упрощения работы. Если вы взгляните на код выше, то увидите, что в данном примере вызывается шаблон index (в атрибуте data-template-name). Благодаря этому названию, Ember определяет, какой рутер нужно запустить, т.к. их имена совпадают. Название рутера “IndexRoute”, а внутри определён контроллер:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

В контроллере создаётся источник данных под ключевым словом content, куда мы помещаем массив, состоящий из 3х строк. Как правило, в этом контексте, массив - это модель.

Правильное именование помогает Ember подключаться к нужным ресурсам (к контроллерам с моделью). Именно поэтому при выводе данных в шаблоне можем пользоваться как ключевым словом content, так и model:

{{#each item in model}}
    <li>{{item}}</li>
{{/each}}

Данные строки генерируют код, который вы видите на странице.

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

Начинаем всё с нуля

Я уже вскользь коснулся главного объекта приложения. В документации есть вся необходимая инфа о том, что происходит при инициализации объекта:

Настройка пространства имён вашего приложения. Все классы превращаются в свойства объекта (пр. App.PostsView и App.PostsController). Это помогает предотвратить всевозможные коллизии;

• Настройка обработчиков событий;
• Автоматическая обработка базового шаблона приложения, на основе которого будут работать другие шаблоны;
• Автоматическая настройка рутера, в зависимости от текущего URL.

Итак, всё выше перечисленное происходит при выполнении команды:

App = Ember.Application.create({});

Прошу заметить, что App - это не ключевое слово в Ember. Это обычная глобальная переменная, определяющая пространства имён. Почему именно App? Потому что множество демо примеров документации используют именно это название. Чтобы после копирования примеров не нужно было что-то переименовывать, сообщество использует название App.

Ember автоматически генерирует изначальные настройки:

// создаёт пространство имён для приложения
App = Ember.Application.create({});

// создаёт глобальный рутер
App.Router.map( function() {});

// создаёт изначальные настройки рутера
App.ApplicationRoute = Ember.Route.extend({});

// создаёт базовый шаблон
<script type="text/x-handlebars" data-template-name="application">
    {{outlet}}
</script>

Теперь давайте поговорим о шаблоне по умолчанию. Почему мы не видим его содержимое? Потому что для этого нужно выставить специальную настройку.

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

<script type="text/x-handlebars">
    <h1>Application Template</h1>
</script>

или так:

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
</script>

Если не задать шаблону имя через атрибут data-template-name, то Ember расценит его как шаблон приложения и обработает должным образом.

Если сейчас в файл index.html добавить следующий код:

<script type="text/x-handlebars" data-template-name="application">
    <h1>Application Template</h1>
    {{outlet}}
</script>

то заголовок появится на странице. Маркер {{outlet}} будет заменён на вывод отдельного шаблона страницы. Базовый шаблон позволяет создать общее оформление разным состояниям вашего приложения: шапку, подвал и так далее.. Добавив базовый шаблон в index.php, вы словно говорите Ember действовать следующим образом:

• Автоматически обработать шаблон приложения;
• Заменить {{outlet}} на содержимое шаблона текущей страницы;
• Обработать и вывести содержимое шаблона index.

Тут главное создать базовый шаблон. Обо всём остальном Ember позаботится сам. Именно это делает эту библиотеку такой мощной.

Настройка рутера

Понять, как работать с рутором, очень важно, ведь это ключевая часть Ember. Для того, чтобы отслеживать навигацию по приложению, нужно создать специальный метод. Тут-то и понадобятся знания о том, как настроить рутер.

Объекты рутера определяют, какие ресурсы нужно отобразить при навигации по приложению.

Взгляните на js/app.js, и вы найдёте код создания рутера для начальной страницы:

App.IndexRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['red', 'yellow', 'blue']);
  }
});

Однако самого объекта тут нет. Ember сам создаст его, в случае необходимости. Для начальной страницы это будет выглядеть примерно так:

App.Router.map( function() {
   this.resource( 'index', { path: '/' } );
});

Данный код означает, что Ember создаёт маршрут для главной страницы, и в случае, если пользователь на неё зашёл, будет вызван маршрут index (IndexRoute). Вот почему многое работает на автопилоте. По слову index, Ember будет искать опцию для маршрута IndexRoute. При создании данного маршрута мы указали контроллер с данными.

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

• Аккаунт: (URL: /account)
• Профиль (URL: /profile)
• Галерея (URL: /gallery)

В каждый из этих секций будет подгружаться собственная пачка данных. Для создания обработчика маршрутов необходимо воспользоваться методом resourse():

App.Router.map( function() {
   this.resource( 'accounts' );
   this.resource( 'profiles' );
   this.resource( 'gallery' );
});

Данный код поможет Ember понять структуру вашего приложения, и в зависимости от этого, правильно управлять ресурсами. Теперь нам необходимо создать сами маршруты следующего вида:

App.GalleryRoute = Ember.Route.extend({
  setupController: function(controller) {
    controller.set('content', ['pic-1.png', 'pic-2.png', 'pic-3.png']);
  }
});

Теперь при навигации на “/gallery”, Ember.js инициирует объект GalleryRoute, настраивает контроллер с данными и рендерит шаблон. Всё это происходит на автомате, благодаря правильному именованию ресурсов.

Также у вас есть возможность использовать сложные url вида: /account/new

В этом случае, настройка рутера будет выглядеть так:

App.Router.map( function() {
   this.resource( 'accounts',  function() {
     this.route( 'new' );
   });
});

В этом фрагменте, внутри метода resource(), происходит дополнительная надстройка маршрута с помощью route(). В этом случае, Ember сначала убедится в наличии ресурса accounts и обработает шаблон accounts. Затем будет уже обрабатывать ресурсы для шаблона accounts.new.

Также можно создавать ещё более сложные структуры:

App.Router.map( function() {
  this.resource( 'accounts', function() {
    this.route( 'new' );
    this.resource( 'pictures', function() {
      this.route( 'add' );
    });
  });
});

Итог

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

• Комментарии