Стартуем с 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.
Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/Y6Uf9poTtNA/lessons.php
Дайджест новых статей по интернет-маркетингу на ваш email
Новые статьи и публикации
- 2024-04-17 » 23 сервиса для эффективного экспресс-аудита любого сайта
- 2024-04-08 » Яндекс переходит на новую версию Wordstat
- 2024-04-08 » Яндекс интегрировал в свой облачный сервис эмпатичную нейросеть
- 2024-04-08 » Новая версия нейросети Claude превзошла по мощности аналоги Google и OpenAI
- 2024-04-08 » Как пользоваться GPT 4 и Claude бесплатно и без VPN
- 2024-03-13 » Стратегии SEO на 2024 год
- 2024-03-13 » Как использовать анимацию с помощью JavaScript-библиотеки GSAP
- 2024-03-13 » Использование GSAP 3 для веб-анимации
- 2024-03-13 » Cогласование топографической съёмки с эксплуатирующими организациями
- 2024-02-19 » Теряются лиды? Как настроить сквозную аналитику
- 2024-02-17 » Мерч и IT: на что обратить внимание в 2024 году
- 2024-02-16 » Копируем с RSync: основные примеры синхронизации файлов
- 2024-02-15 » Лучшие noCode AI платформы для создания диалоговых ботов
- 2024-02-14 » Факторы ранжирования Google 2024 — исследование Semrush
- 2024-02-12 » Перенос сайта на другой хостинг
- 2024-02-05 » В России сформирован реестр хостинг-провайдеров
- 2024-02-04 » Использование SSH для подключения к удаленному серверу Ubuntu
- 2024-02-03 » Подключаемся к серверу за NAT при помощи туннеля SSH. Простая и понятная инструкция
- 2024-02-02 » Настройка CI/CD для Gitlab-репозитория: схемы и гайд по шагам
- 2024-02-01 » GitLab CI Pipeline. Запуск сценария через SSH на удаленном сервере
- 2024-01-29 » Introduction to GitLab’s CI/CD for Continuous Deployments
- 2024-01-26 » Настройка GitLab CI/CD
- 2024-01-25 » Установка shell gitlab runner
- 2024-01-25 » Установка и регистрация gitlab-runner в docker контейнере
- 2024-01-25 » Переменные Gitlab-Ci
- 2024-01-25 » Настройка CI/CD в GitLab для синхронизации проекта с веб-серверами
- 2024-01-25 » Копирование файлов scp
- 2024-01-21 » Бездепозитные бонусы от казино: обзор условий и правил использования
- 2024-01-18 » Современная обработка ошибок в PHP
- 2024-01-18 » Пример шаблона проектирования MVC в PHP
«Web делает доступным все, для всех, везде и всегда. Если знания - это сила, то сила сейчас находится практически везде». К. Нордстрем, Й. Ридерстрале |
Мы создаем сайты, которые работают! Профессионально обслуживаем и продвигаем их , а также по всей России и ближнему зарубежью с 2006 года!
Как мы работаем
Заявка
Позвоните или оставьте заявку на сайте.
Консультация
Обсуждаем что именно Вам нужно и помогаем определить как это лучше сделать!
Договор
Заключаем договор на оказание услуг, в котором прописаны условия и обязанности обеих сторон.
Выполнение работ
Непосредственно оказание требующихся услуг и работ по вашему заданию.
Поддержка
Сдача выполненых работ, последующие корректировки и поддержка при необходимости.