Стартуем с Ember.js (часть 4)

В предыдущем уроке, мы затронули работу с объектом Ember.Object для создания моделей. В этом уроке мы более детально рассмотрим работу с шаблонами Handlebars, для создания богатого пользовательского интерфейса.

Шаблоны на стороне клиента

Многие серверные языки используют различного рода шаблонизаторы для динамической генерации кода на лету. Если вы когда-то кодили на ASP.NET, ColdFusion, PHP или Rails, то наверняка, понимаете, о чём идёт речь.

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

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

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

<script type="text/x-handlebars">
    <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

Первое, что тут нужно смекнуть, как объявляются шаблоны; второе: каким образом выводятся переменные. Синтаксис очень прост, но всё же в нём можно найти несколько деталей, которые стоит пообсуждать.

Синтаксис

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

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

<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>

Чтобы задействовать шаблонизатор, нам необходимо создать специальный элемент с атрибутом type равным значению "text/x-handlebars". Данное значение будет игнорироваться браузерами, но оно важно для Ember, для того чтобы определить, где находится шаблон. Также Ember использует значение атрибута “data-template-name” для определения того, какую именно часть приложения нужно задействовать. К примеру, следующий код представляет из себя определение шаблона под названием “employee”:

<script type="text/x-handlebars" data-template-name="employee">
...
</script>

При запуске приложения Ember ищет в DOM все вхождения “type="text/x-handlebars”, компилирует их, и сохраняет в объекте Ember (Ember.TEMPLATES), где определяется, какой шаблон задействовать, в зависимости от маршрута. Вот почему очень важно соблюдать правила именования объектов. В примере, описанном выше, шаблон будет автоматически ассоциирован с маршрутом и контроллером.

Отталкиваясь от URL, Ember определяет ресурсы и шаблон, который необходимо задействовать. Давайте представим, что у вас есть страница профилей с url “/profile”. Исходя из этого, у вас должен быть ресурс и маршрут под названием profile. Создание ресурсов и прочих объектов было рассмотрено во второй части данной серии уроков.

Перейдя по данному адресу, Ember определит, какие данные извлечь, в какой шаблон передать и как вывести (URL “/profile”, загрузит ресурс profile, обработает шаблон data-template-name="profile"):

• Маршрут: ProfileRoute
• Контроллер: ProfileController
• Шаблон: profile (в нижнем регистре)

Названия всех перечисленных ресурсов соответствуют URL (с добавлением специфических постфиксов для каждого вида ресурса).

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

Выражения

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

<script type="text/x-handlebars">
    <h2><strong>{{firstName}} {{lastName}}</strong></h2>
</script>

В данном примере, выражения {{firstName}} и {{lastName}} Ember обработает и извлечёт соответствующие данные из контроллера. Также на этом шаге происходит автоматическая настройка “наблюдателей”, так что если выводимые данные будут изменены, это сразу же отобразится и на экране.

Главное, что вам нужно знать на данном этапе:

• Для определения шаблона Ember использует специальный атрибут;
• В шаблонах используется специальный синтаксис для вывода переменных, пришедших со стороны клиента;
• Шаблоны работают на основе Handlebars;
• Ember автоматически настраивает “наблюдателей” за данными;

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

Сложные выражения

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

"items": [{
    "title": "Tearable Cloth Simulation in JavaScript",
    "url": "http://codepen.io/stuffit/pen/KrAwx",
    "id": 5592679,
    "commentCount": 20,
    "points": 127,
    "postedAgo": "1 hour ago",
    "postedBy": "NathanKP"
}, {
    "title": "Netflix now bigger than HBO",
    "url": "http://qz.com/77067/netflix-now-bigger-than-hbo/",
    "id": 5592403,
    "commentCount": 68,
    "points": 96,
    "postedAgo": "2 hours ago",
    "postedBy": "edouard1234567"
}

Если я не уверен, существует ли в этой пачке данных поле title, я могу воспользоваться условным выражением “if” (#if), чтобы это проверить:

{{#if item.title}}
    <li>{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}</li>
{{/if}}

Если поля названия в объекте item нет, то элемент списка не выведется.

Поскольку данная пачка содержит более чем одну запись, то вам не помешает знать, как пройтись по ним в цикле. Для этого можем воспользоваться циклом {{#each}}, что позволит нам пробежаться по всем объектам в модели. Напоминаю, что сама работа с моделью осуществляется в контроллере:

<ul>
    {{#each item in model}}
    {{#if item.title}}
        <li>{{item.title}} - {{item.postedAgo}} by {{item.postedBy}}</li>
    {{/if}}
    {{/each}}
</ul>

Результат будет примерно такой:

<ul>
<li>Tearable Cloth Simulation in JavaScript - 1 hour ago by NathanKP</li>
<li>Netflix now bigger than HBO - 2 hours ago by edouard1234567</li>
<li>Fast Database Emerges from MIT Class, GPUs and Student's Invention - 33 minutes ago by signa11</li>
<li> Connecting an iPad retina LCD to a PC - 6 hours ago by noonespecial</li>
</ul>

Если хотите применять более сложные выражения, то вам нужно создавать вычисляемые свойства. Данная возможность позволяет создавать комплексные проверки. К примеру, я хочу вывести название, если оно совпадает с "Tearable Cloth Simulation in JavaScript". Для этого нужно:

• Проверить все записи на наличие свойства title;
• Создать отдельный контроллер, который будет использоваться каждым объектом данных;
• Обновить шаблон, чтобы каждый объект мог использовать назначенный им контроллер с вычислительным свойством.

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

App.TitleController = Ember.ObjectController.extend({
    titleMatch: function() {
      return this.get('title’) === ‘Tearable Cloth Simulation in JavaScript’;
    }.property()
});

Для этого наследуем объект от класса Ember.ObjectController. Затем создаём поле titleMatch, которое использует метод get() извлекает значение поля title, сравнивает с определённым текстом и возвращает результат. Далее мы применяем метод property(), для того чтобы преобразовать поле titleMatch в функцию.

Теперь при выводе данных в цикле {{#each}} нам необходимо указать, какой контроллер следует привязать к каждому объекту. Делается это при помощи ключевого слова itemController:

<ul>
   {{#each item in model itemController="title"}}
      {{#if titleMatch}}
        <li>{{foo.title}} - {{foo.postedAgo}} by {{foo.postedBy}}</li>
      {{/if}}
    {{/each}}
</ul>

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

Теперь к каждому объекту будет применена проверка на определённое нами название.

Привязка данных к элементам

Работа с шаблонами - это не только вывод текста. Часто интерфейс должен меняться в зависимости от новых значений исходных данных. Это, в основном, относится к изображениям или генерации ссылок.

Для привязки специальных данных к элементам страницы нам необходимо воспользоваться специальными помощниками Ember, которые будут отвечать за актуализацию интерфейса, в зависимости от изменения исходных данных. Для назначения атрибутов используется помощник {{bindAttr}}. Если же нам нужно будет динамически задать url ссылке, то мы можем сделать это так:

<img {{bindAttr src="/logoUrl"}} alt="Logo">

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

<input type="checkbox" {{bindAttr disabled="isAdministrator"}}>

В этом случае, isAdminstrator - это вычисляемое свойство, работу с которыми мы посмотрели выше, или поле какого-то объекта. Также подобную технику можно применять для того, чтобы определить, какой класс задать элементу страницы:

<div {{bindAttr class="isUrgent"}}>
  Warning!
</div>

В зависимости от результата проверки, код будет или такой:

<div {{bindAttr class="is-urgent"}}>
  Warning!
</div>

или такой:

Обратите внимание на то, что Ember преобразует имя класса с isUrgent на is-urgent. Если вам нужно назначить какой-то класс, в зависимости от результата проверки, то можете сделать это так:

<div {{bindAttr class="isUrgent:urgent:normal"}}>

В результате, элементу будет присвоен класс urgent или normal, в зависимости от результата проверки isUrgent.

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