Для создания диалогового окна требуется 2 вида шаблонов: layout и template. Layout отвечает за внешний вид окна, именно в нем содержатся элементы управления (имеет на борту нужные кнопки). Также определяет тип диалогового окна. Template это само тело окна, в нем также могут определяться элементы управления, поскольку окружение у layout и template одно и то же.
Зачем же нужно такое разделение? У проекта могут быть типовые диалоговые окна: для информирования пользователя о чем-то, показа ошибок, предупреждений, для подтверждения каких-то действия, различные нотисы (в углу страницы), диалоговые окна с формами и т.д. И чтобы избежать дублирования кода (который отвечает за тип окна) нужно использовать layouts.
О том как стилизовать диалоговые окна вы можете узнать на странице {{#link-to 'tutorial.customizing-dialog' class='w-link'}}{{t "tutorial.customizing_dialog"}}{{/link-to}}.
Схематично диалоговое окно можно представить следующим образом:
Лейаут отвечает за внешний вид окна (то как оно показывается, где показывается), набор UI элементов. Ember dialog имеет на борту 3-и layouts:
Alert layout. Имеет на борту всего одну кнопку (ok) и крестик закрытия - при закрытии Promise резолвится. Может быть использовано для показа пользователю каких-то сообщений.
Confirm layout. Имеет на борту две кнопки (yes, no) и крестик закрытия - при закрытии через крестик или по кнопке no - Promise становится rejected, при закрытии через кнопку yes - становится resolved. Может быть использовано для подтверждения пользователем какого-то действия.
Blank layout. Совершенно пустое модальное окно. Может быть использовано для показа форм, у которых action accept вызывается на submit формы. Подробнее об этом читайте на странице {{#link-to 'cookbook.working-with-forms'}}{{t "cookbook.working_with_forms"}}{{/link-to}}. Элементы зыкрытия в таком случае должны находиться в теле модального окна
По аналогии с приведенными выше layouts вы можете создать свои собственные.
Например layout модального окна со значком info.
Или более сложные варианты, например layout notice диалогового окна. Ниже схематично представление его layout. Как такой вид диалоговых окон сделать вы можете узнать на странице {{#link-to 'cookbook.creating-notices' class='w-link'}}{{t "cookbook.creating_notices"}}{{/link-to}}.
Итак как создавать layouts и их использовать. Layout - это простой шаблон, как вы понимаете, он должен находиться в директории app/templates. Для того чтобы показать диалоговое окно с созданным layout путь до него нужно указать первым аргументом при вызове метода show {{#link-to 'tutorial.presenter-and-manager' class='w-link'}}Dialog Manager{{/link-to}}.
Например давайте создадим новый вид диалогового окна, которое будет выводиться в левом верхнем углу страницы, с красным background, назовем его red-corner-dialog. Для этого в директории шаблонов создадим файл red-corner-dialog.hbs.
Файл app/templates/red-corner-dialog.hbs
В контроллере показ (создание) диалогового окна тогда будет выглядеть так:
Или вы можете упрятать этот лейаут в специальный метод, отнаследовав Dialog Manager.
Файл app/services/dialog.js
И тогда в контроллере вы сможете делать так:
Схемотично это диалоговое окно выглядит так:
Это тело диалогового окна, у него такой же скоуп как и у layout. В нем также как и в layout могут быть элементы управления диалоговым окном (т.е. быть произведен вызов accept и decline actions). Если при создании окна был указан context, он будет также как и в layout доступен в специальной переменной contextObject. Благодаря contextObject возможно связывать данные с шаблоном, а также вызывать различные actions context.
Template, как правило используется для показа простого текста, но позволяет выводить более сложные структуры, такие как формы (см. {{#link-to 'cookbook.working-with-forms' class="w-link"}}{{t "cookbook.working_with_forms"}}{{/link-to}}).
