Ember Components: Глубокое погружение

Ember.js — это JavaScript MVC-инфраструктура, которая позволяет разработчикам создавать амбициозные веб-приложения. Хотя чистый MVC позволяет разработчику разделять задачи, он не предоставляет вам все инструменты, и вашему приложению потребуются другие конструкции. Сегодня я собираюсь поговорить об одной из этих конструкций. Компоненты Ember — это, по сути, песочница для многократного использования. Если вы не знакомы с Ember, ознакомьтесь с разделом Начало работы с Ember.js или с курсом Let’s Learn Ember . В этом руководстве мы рассмотрим спецификацию веб-компонентов, узнаем, как написать компонент в Ember, поговорим о композиции, объясним разницу между представлением Ember и компонентом Ember, а также попрактикуемся в интеграции плагинов с компонентами Ember.

Слово о веб-компонентах

Компоненты Ember основаны на спецификации веб-компонентов W3C . Спецификация состоит из четырех меньших спецификаций; шаблоны, декораторы, теневой DOM и пользовательские элементы. Из этих четырех концепций только три из них имеют жесткие спецификации, исключение составляют декораторы. Благодаря наличию спецификаций разработчики фреймворка смогли заполнить эти новые API до того, как они будут внедрены поставщиками браузеров.

Есть несколько важных понятий, которые нужно понять при обсуждении компонентов:

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

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

В то время как Ember успешно заполнил много спецификаций, фреймворки, такие как AngularJS , Dart , Polymer и Xtags, имеют аналогичные решения. Единственное предостережение здесь заключается в том, что Ember и Angular в настоящее время не применяют стили к компоненту. Со временем эти решения для полифилла исчезнут, и фреймворки примут реализацию браузера. Это принципиально иной подход к разработке, поскольку мы можем использовать преимущества будущих спецификаций, не привязываясь к экспериментальным функциям в браузерах.

Самый базовый компонент Ember

Зная наши знания о веб-компонентах, давайте реализуем базовый компонент my-name сверху, но на Ember. Давайте начнем с загрузки Ember Starter Kit с сайта Ember . На момент написания данного руководства версия Ember 1.3.0. После загрузки откройте файлы в вашем любимом редакторе, удалите все шаблоны в index.html (обозначается как data-template-name) и все в app.js

Первое, что мы собираемся сделать, это создать шаблон компонента. Для этого урока мы будем использовать встроенные шаблоны. Это можно сделать, написав следующее в своем файле index.html . Нам также нужно создать новое приложение Ember в нашем JavaScript.

Вы заметите, что data-template-name имеет путь вместо простой строки. Причина, по которой мы добавляем к имени нашего компонента "components/" заключается в том, чтобы сообщить Эмбер, что мы имеем дело с шаблоном компонента, а не с обычным шаблоном приложения. Вы также заметите, что в имени компонента есть дефис. Это пространство имен, которое я упомянул в спецификации веб-компонентов. Пространство имен сделано так, чтобы у нас не было конфликтов имен с существующими тегами.

Если мы откроем браузер, мы не увидим ничего другого. Причина этого в том, что нам еще ничего не нужно помещать в наш шаблон my-name. Давайте позаботимся об этом.

Теперь в браузере вы должны увидеть что-то похожее на изображение выше. Мы еще не закончили, как вы можете видеть, мы на самом деле не печатаем имя. Как я упоминал в первом разделе, компоненты должны предоставлять четко определенный интерфейс для внешнего мира. В данном случае нас интересует название. Итак, давайте передадим имя, поместив атрибут name в компонент my-name.

Когда вы обновите страницу, вы должны увидеть «Привет, меня зовут Чад» . Все это с написанием одной строки JavaScript. Теперь, когда у нас есть чувство написания базового компонента, давайте поговорим о разнице между компонентами Ember и представлениями Ember.

Ember Components против Ember Views

Ember — это MVC, поэтому некоторые могут подумать: «Почему бы просто не использовать представление для этого?» Это законный вопрос. Компоненты на самом деле являются подклассом Ember.View, самое большое отличие здесь заключается в том, что представления обычно находятся в контексте контроллера. Возьмите пример ниже.

Представления обычно располагаются за шаблоном и превращают необработанный ввод (click, mouseEnter, mouseMove и т. Д.) В семантическое действие (openMenu, editName, hideModal и т. Д.) В контроллере или маршруте. Еще одна вещь, на которую следует обратить внимание: шаблонам также нужен контекст. Таким образом, в конечном итоге происходит то, что Ember выводит контекст через соглашения об именах и URL. Смотрите схему ниже.

Как вы можете видеть, существует уровень иерархии, основанный на URL-адресе, и каждый уровень этой иерархии имеет свой собственный контекст, который определяется соглашениями об именах.

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

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

Состав Компонентов

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

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

Давайте начнем с создания нового html-файла с именем chat.html и настройки всех зависимостей для Ember. Далее создайте все шаблоны.

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

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

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

В этом случае мы передаем модель из контекста IndexRoute как «messages», и мы установили строку sendMessage в качестве действия над компонентом. Действие будет использоваться для трансляции, когда пользователь хочет отправить новое сообщение. Мы расскажем об этом позже в уроке. Еще одна вещь, которую вы заметите, это то, что мы устанавливаем строгие интерфейсы для вложенных компонентов, все из которых используют данные, передаваемые из интерфейса группового чата.

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

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

С нашим компонентом user-avatar мы хотим использовать сервис под названием Avatars.io для получения аватара пользователя Twitter на основе его имени пользователя в Twitter. Давайте посмотрим, как компонент user-image используется в шаблоне.

Это довольно простой компонент, но вы заметите, что у нас есть связанное свойство с именем avatarUrl . Нам нужно создать это свойство в нашем JavaScript для этого компонента. Еще одна вещь, которую вы заметите, это то, что мы указываем сервис, с которого мы хотим получить аватар. Avatars.io позволяет вам получать социальные аватары из Twitter, Facebook и Instagram. Мы можем сделать этот компонент чрезвычайно гибким. Давайте напишем компонент.

Как видите, для создания нового компонента мы просто следуем соглашению об именах NAMEOFCOMPONENTComponent и расширяем Ember.Component . Теперь, если мы вернемся к браузеру, мы должны увидеть наши аватары.

Чтобы позаботиться о форматировании даты, давайте использовать moment.js и напишем помощник Handlebars для форматирования даты для нас.

Теперь все, что нам нужно сделать, это применить помощник к нашему компоненту отметки времени.

Теперь у нас должен быть компонент, который форматирует даты, а не временные метки эпохи Unix.

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

Здесь нужно отметить пару моментов. Одним из них является синтаксис обработчика событий on() . Это было введено в Ember до релиза 1.0. Он делает именно то, что вы думаете, когда компонент метки времени вставляется в DOM, вызывается scheduleStartTime . Когда элемент собирается уничтожить и очистить, будет killTimer метод killTimer . Остальная часть компонента просто сообщает время для обновления каждую минуту.

Ember.run вещь, которую вы заметите, это то, что есть несколько звонков на Ember.run . В Ember есть система очередей, обычно называемая циклом выполнения, которая сбрасывается при изменении данных. Это делается для того, чтобы объединить изменения и сделать их один раз. В нашем примере мы будем использовать Ember.run.later для запуска метода startTimer каждую минуту. Мы также будем использовать Ember.run.cancel для отключения таймера. По сути, это собственные методы начала и окончания интервалов Ember. Они необходимы для синхронизации системы очередей. Для получения дополнительной информации о цикле выполнения я предлагаю прочитать статью Алекса Матчнера «Все, что вы никогда не хотели знать о Ember Run Loop» .

Следующее, что нам нужно сделать, это настроить действие так, чтобы, когда пользователь нажимает «Отправить», было создано новое сообщение. Наш компонент не должен заботиться о том, как создаются данные, он должен просто сообщить, что пользователь попытался отправить сообщение. Наш IndexRoute будет нести ответственность за принятие этого действия и превращение во что-то значимое.

Поскольку компонент группового чата владеет кнопкой ввода и отправки, нам нужно реагировать на нажатие кнопки «Отправить» на этом уровне абстракции. Когда пользователь нажимает кнопку отправки, он выполняет действие отправки в реализации нашего компонента. В обработчике действия отправки мы собираемся получить значение сообщения, которое задается вводом текста. Затем мы отправим действие вместе с сообщением. Наконец, мы сбросим сообщение до пустой строки.

Другая странная вещь, которую вы видите здесь, это Ember.run.schedule метод Ember.run.schedule . Еще раз, это цикл выполнения Ember в действии. Вы заметите, что расписание принимает строку в качестве первого аргумента, в данном случае «afterRender». У Ember на самом деле есть несколько разных очередей, которыми он управляет, и это одна из них. Таким образом, в нашем случае мы говорим, что когда отправка сообщения завершена, выполняются какие-либо манипуляции, и после того, как очередь рендеринга очищена, вызовите наш обратный вызов. Это прокрутит нашу ul to the bottom so the user can see the new message after any manipulations. For more on the run loop, I suggest reading Alex Matchneer's article "Everything You Never Wanted to Know About the Ember Run Loop" . ul to the bottom so the user can see the new message after any manipulations. For more on the run loop, I suggest reading Alex Matchneer's article "Everything You Never Wanted to Know About the Ember Run Loop" .

Если мы перейдем в браузер и нажмем кнопку отправки, мы получим действительно приятную ошибку от Ember: «Uncaught Error: Ничто не обработало событие« sendMessage ». Это то, что мы ожидаем, потому что мы не сообщили нашему приложению о том, как к реакции на эти типы событий. Давайте это исправим.

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

Поэтому, когда sendMessage действие sendMessage мы хотим заполнить поле text и timeStamp нашей модели Message, создать новый его экземпляр, а затем вставить этот экземпляр в существующую коллекцию сообщений.

Когда мы вернемся к браузеру, мы сможем создавать новые сообщения.

Теперь у нас есть несколько различных многократно используемых блоков пользовательского интерфейса, которые мы можем разместить где угодно. Например, если вам нужно было использовать аватар где-то еще в приложении Ember, мы можем повторно использовать компонент user-avatar.

Упаковка плагинов jQuery

В этот момент вы, вероятно, задаетесь вопросом «Что если я захочу использовать какой-нибудь плагин jQuery в своем компоненте?» Нет проблем. Для краткости давайте изменим наш компонент user-avatar, чтобы отображать подсказку при наведении курсора на аватар. Я решил использовать всплывающую подсказку плагина jQuery для обработки всплывающей подсказки. Давайте изменим существующий код, чтобы использовать всплывающую подсказку.

Сначала добавим правильные файлы в наш chat.html и chat.html существующий компонент аватара пользователя.

И тогда наш JavaScript:

Еще раз мы видим синтаксис декларативного прослушивателя событий, но впервые видим this.$ . Если вы знакомы с jQuery, вы ожидаете, что мы будем запрашивать все элементы с классом «аватар». В Ember это не так, потому что применяется контекст. В нашем случае мы ищем только элементы с классом ‘avatar’ в компоненте user-avatar. Это сопоставимо с методом поиска jQuery. После уничтожения элемента мы должны отменить привязку к аватору на аватаре и очистить любую функциональность, это делается передачей ‘destroy’ подсказке инструмента. Если мы зайдем в браузер, обновим и наведем курсор на изображение, то увидим имя пользователя.

Вывод

В этом руководстве мы подробно рассмотрели компоненты Ember и показали, как можно использовать повторно используемые блоки пользовательского интерфейса для создания более крупных композитов и интеграции плагинов jQuery. Мы смотрели на то, как компоненты отличаются от представлений в Ember. Мы также рассмотрели идею интерфейсного программирования, когда речь заходит о компонентах. Надеюсь, мне удалось пролить некоторый свет не только на Ember Components, но и на Web-компоненты и на то, куда движется сеть.