En En

Ключевые понятия


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

ember core concepts

Роутер и обработчики маршрутов

Представьте, что мы пишем для сайта веб-приложение, которое дает пользователям возможность составить список собственности со стоимостью аренды. В любой момент мы должны суметь ответить на вопросы о текущем состоянии приложения, например, «Какую собственность просматривают пользователи?», «Редактируют ли они текущий элемент в списке?». В Ember ответы на эти вопросы определяются URL. URL можно установить несколькими способами:

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

Независимо от того, как установлен URL, роутер Ember сопоставляет текущий URL с обработчиком маршрута.

В таком случае обработчик маршрута выполняет следующее:

  • Отображает шаблон.
  • Загружает модель, доступную для шаблона.

Шаблоны

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

Большинство шаблонов в кодовой базе Ember довольно похожи и выглядят как обычный фрагмент HTML. Например:

<div>Hi, this is a valid Ember template!</div>

Шаблоны Ember используют синтаксис шаблонов Handlebars. Все, что допустимо для синтаксиса Handlebars, допустимо и для синтаксиса Ember.

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

<div>Hi {{name}}, this is a valid Ember template!</div>

Здесь {{name}} — это свойство, предоставленное контекстом шаблона.

Помимо свойств, в двойных фигурных скобках ({{}}) могут стоять хелперы и компоненты, которые мы обсудим позднее.

Модели

Модели представляют собой устойчивое состояние.

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

Модель обычно хранит информацию на веб-сервере, хотя с помощью настроек можно сохранять данные где угодно, например, в локальном хранилище браузера.

Компоненты

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

Компоненты состоят из двух частей: шаблона, написанного на Handlebars, и исходного файла на JavaScript, который определяет поведение компонента. Например, в приложении для учета арендной платы может быть компонент all-rentals для отображения списка собственности с ценой аренды и компонент rental-tile для отдельной записи. Компонент rental-tile мог бы определять поведение, которое дает пользователю возможность скрывать и показывать изображение дома или квартиры.

В следующих уроках мы рассмотрим эти ключевые концепции на практике и создадим приложение для учета арендной платы.


Комментарии (2)

  1. istok20 29 мая 2016, 16:09 # 0
    использование Router.map означает, что Router — это массив, для каждого элемента которого мы вызываем this.route('rentals')? как это вообще понимать?)
    1. Дмитрий 25 августа 2016, 09:46 # 0
      Если объект имеет метод map, он не обязательно массив)
    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.