Ember: С чего начать?

В этой статье мы расскажем о том, как с нуля создавать в Ember простые приложения.

Содержание

Установка Ember

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

npm install -g ember-cli@2.15

Создание нового приложения

После того, как вы установили Ember CLI, в терминале появится доступ к новой команде ember. Ее можно использовать для создания нового приложения.

ember new ember-quickstart

Эта одна команда создаст новый каталог ember-quickstart и настроит внутри него новое приложение Ember. Оно будет включать в себя:

  1. Сервер разработки;
  2. Компилятор шаблонов;
  3. Минимизатор JavaScript и CSS;
  4. Функции ES2015 через Babel.

Сделаем так, чтобы все работало правильно в Ember js по русски. Перейдите в каталог приложения ember-quickstart и запустите сервер разработки, введя:

cd ember-quickstart
ember server

Через несколько секунд вы увидите на экране следующее:

Livereload server on http://localhost:49152
Serving on http://localhost:4200/
Создание динамических форм с помощью JavaScript

Чтобы остановить сервер в любое время, нажмите в терминале Ctrl-C.

Откройте в своем браузере URL-адрес http://localhost:4200. Вы должны увидеть страницу приветствия Ember. Поздравляю! Вы только что создали и загрузили свое первое приложение на Ember.

Мы начнем с редактирования шаблона application. Он всегда отображается на экране, когда пользователь загружает ваше приложение. В редакторе кода откройте файл app/templates//application.hbs и замените его содержимое следующим кодом:

app/templates//application.hbs
<h1>PeopleTracker</h1>

{{outlet}}

Ember определяет измененный файл и автоматически перезагружает страницу. Вы должны увидеть, что страница приветствия была заменена на «PeopleTracker». Мы также добавили на эту страницу {{outlet}}, поэтому в этом месте будет отображаться любой вложенный маршрут.

Определение маршрута

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

Ember поставляется с генераторами, которые автоматизируют создание шаблонного кода. Чтобы создать маршрут, введите его в новом окне терминала в каталоге ember-quickstart:

ember generate route scientists

Вы должны увидеть следующий результат:

installing route
  create app/routes/scientists.js
  create app/templates//scientists.hbs
updating router
  add route scientists
installing route-test
  create tests/unit/routes/scientists-test.js

Это Ember сообщает, что он создал:

  • Шаблон, который будет отображаться при посещении пользователем папки /scientists;
  • Объект Route, который извлекает модель, используемую этим шаблоном;
  • Запись в маршрутизаторе приложения (находится в app/router.js);
  • Единичный тест для этого маршрута.

Откройте вновь созданный шаблон в файле app/templates//scientists.hbs и добавьте в него следующий HTML-код:

app/templates//scientists.hbs
<h2>List of Scientists</h2>
Вызываем ветер (скрипты)

В браузере откройте страницу http://localhost:4200/scientists. Вы должны увидеть заголовок <h2>, который разместили в шаблоне scient.hbs сразу под заголовком <h1> из шаблона application.hbs.

Теперь, когда мы отобразили шаблон scientists, добавим в него данные. Для этого мы укажем модель маршрута, отредактировав файл app/routes/scientists.js.

Мы возьмем код Ember js, созданный для нас генератором, и добавим в метод model():

app/routes/scientists.js
import Ember from 'ember';

export default Ember.Route.extend({
  model() {
    return ['Marie Curie', 'Mae Jemison', 'Albert Hofmann'];
  }
});

В этом примере кода используются новые функции JavaScript, с некоторыми из которых вы, возможно, не знакомы. В методе маршрута model() мы возвращаем данные, которые хотим сделать доступными для шаблона. Если нужно получать данные асинхронно, метод model() поддерживает все библиотеки, которые используют JavaScript Promises.

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

app/templates//scientists.hbs
<h2>List of Scientists</h2>

<ul>
  {{#each model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>

Здесь мы используем вспомогательную функцию each для обработки через цикл каждого элемента в массиве, который мы предоставили из хука model(), и вывода его внутри элемента <li>.

Создание компонента пользовательского интерфейса

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

Создадим компонент people-list, который можно использовать в нескольких местах для вывода списка людей.

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

ember generate component people-list
12 самых свежих JavaScript-фреймворков 2015 года

Скопируйте и вставьте шаблон scientists в шаблон компонента people-list. Отредактируйте его, чтобы он выглядел следующим образом:

app/templates//components/people-list.hbs
<h2>{{title}}</h2>

<ul>
  {{#each people as |person|}}
    <li>{{person}}</li>
  {{/each}}
</ul>

Обратите внимание, что мы изменили название - вместо заданной строки ("List of Scientists") мы добавили динамическое свойство ({{title}}). Мы также заменили scientist на более общее person, уменьшив зависимость компонента от того, где он используется.

Сохраните этот шаблон и вернитесь к шаблону scientists. Замените весь старый код новой компонентной версией. Компоненты выглядят как теги HTML, но вместо угловых скобок (<tag>) в них используются двойные фигурные скобки ({{component}}).

Нам нужно указать в компоненте Ember js:

  • Какой заголовок использовать в title;
  • Какой массив людей использовать в атрибуте people. Мы предоставим model этого маршрута в качестве списка людей.
app/templates//scientists.hbs
	<h2>List of Scientists</h2>

<ul>
  {{#each model as |scientist|}}
    <li>{{scientist}}</li>
  {{/each}}
</ul>
{{people-list title="List of Scientists" people=model}}

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

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

События клика

До сих пор мы отображали в приложении Ember js урока данные, но пользователь не мог с ними взаимодействовать. В веб-приложениях часто необходимо отслеживать пользовательские события, такие как клики или наведения курсора. Ember позволяет сделать это очень просто. Сначала добавьте хелпер action к элементу li в компоненте people-list.

app/templates//components/people-list.hbs
	<h2>{{title}}</h2>

<ul>
  {{#each people as |person|}}
    <li>{{person}}</li>
    <li {{action "showPerson" person}}>{{person}}</li>
  {{/each}}
</ul>

Хелпер action позволяет добавлять к элементам прослушиватели событий и вызывать именованные функции. По умолчанию хелпер action добавляет прослушиватель события click, но его можно использовать для отслеживания в элементе любого события. Теперь при клике по элементу li в компоненте people-list будет вызываться функция showPerson из объекта action. Это подобно тому, как если бы мы вызывали this.actions.showPerson(person) из нашего шаблона.

Чтобы обработать т вызов функции, нужно изменить файл компонента people-list и добавить вызываемую функцию. Добавьте объект action с функцией showPerson.

app/components/people-list.js
	import Ember from 'ember';

export default Ember.Component.extend({
  actions: {
    showPerson(person) {
      alert(person);
    }
  }
});

Теперь в браузере при клике по имени ученого вызывается эта функция, и имя человека выделяется.

Построение приложения для развертывания в рабочей среде

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

ember build --env production

Команда build объединяет все активы, составляющие приложение: JavaScript, шаблоны, CSS, веб-шрифты, изображения и т. д.

В данном случае мы указали Ember построить приложение для развертывания в рабочей среде с помощью флага --env. После чего будет создан оптимизированный пакет, готовый для загрузки на хостинг. По завершении сборки вы найдете все минимизированные активы в папке dist/.

Сообщество Ember уделяет большое внимание совместной разработке Ember js CSS и создает инструменты, которые может использовать каждый. Если вы заинтересованы в быстром и надежном развертывании приложений ознакомьтесь с аддоном Ember CLI Deploy.

Если вы развертываете приложение на веб-сервере Apache, сначала создайте новый виртуальный хост для приложения. Чтобы убедиться, что все маршруты обрабатываются через index.html, добавьте следующую директиву в настройки виртуального хостинга приложения:

FallbackResource index.html

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