Во всех контроллерах после установки ember-dialog появляется свойство `dialog`, которое является ссылкой на сервис диалоговых окон - через который создаются все диалоговые окна.
Чтобы создать наше первое диалоговое окно давайте создадим контроллер, роут и шаблон. Для этого перейдите в корень вашего проекта и запустите команды:
Ember создаст для вас роут, шаблон и контроллер. Давайте теперь откроем созданный нами контроллер (он должен находиться здесь: app/controllers/example.js) и внесем в него следующие изменения:
При заходе на url http://127.0.0.1:4200/example вы увидите дефолтное alert окно с текстом "Hello, Vladimir Milkov". Выполнение js кода было приостановлено до тех пор пока окно не будет закрыто. Выглядит окно так (ну вы и сами знаете ;)):
Чтобы создать ember-dialog модальное окно нужно изменить код следующим образом:
Вы увидите следующее:
Попробуйте сами: показать простой alert, показать диалоговое окно с лейаутом alert.
Ключевым типом диалоговых окон в большинстве проектов является confirm (с двумя кнопками). Такие окна также могут быть созданы из контроллера. Любой метод создающий окно диалогового менеджера возвращает Promise объект, который становится выполненым при закрытии окна. В случае с alert промис на закрытие всего резолвится, но в случае confirm, промис может и зарежектиться. Давайте ближе к коду:
чтобы посмотреть результат отработки примера выше.
Тело диалогового окна может быть передано прямо при создании, следующим образом:
Но в крупных приложениях сообщения типа alert или confirm в разных местах программы одни и те же, и чтобы не плодить дубликаты можно текст сообщения вынести в отдельный шаблон и указывать вместо него путь.
К примеру пример выше можно переделать следующим образом. Создать шаблон `app/templates/messages/alert-error.hbs` и использовать его для показа в диалоговом окне в различных местах программы.
Хорошей практикой для своих проектов я выбрал использование специальной директории для шаблонов-сообщений: /messages/. Рекомендую вам поступить так же.
Любой метод для создания диалогового окна принимает 3 аргумента: шаблон, контекст, опции (исключанием является лишь метод show, который принимает также layout).
Шаблон — путь до шаблона или предкомпилированный шаблон, который нужно вывести в теле диалогового окна.
Контекст — объект с данными, он записывается в специальное свойство объекта диалогового окна - contextObject и может быть использован для показа данных в шаблоне.
Опции — хеш влияющий на поведение диалогового окна, им оно расширяется. Ключи этого хеша неспосредственно доступны в шаблоне.
Из следующего примера должно стать ясно, что к чему ;)
Порой требуется контролировать закрытие модального окна программно. Наиболее частым случаем является диалоговое окно содержащее некую форму (про формы - {{#link-to 'cookbook.working-with-forms' class='w-link'}}отдельная история{{/link-to}}), при закрытии окна нужно создавать определенную сущность по данным формы. Но данные могут быть не валидными и в таком случае закрывать окно не нужно. Как предотвратить закрытие окна? Ранее при создании окна мы получали Promise по закрытию которого могли производить те или иные действия, т.е. постфактум. Итак для того чтобы запретить закрытие диалогового окна мы должны переопределить интересующий нас action у context отвечающий за его закрытие: accept и decline. Первым аргументом в action приходит presenter (инстанс компонента диалогового окна), у которого определены одноименные методы. Вот пример из которого все должно стать ясно.
Но что делать если в контроллере используются несколько диалоговых окон? Нужно задать имя обработчка закрытия для каждого диалогового окна, как это сделать можете почитать на странице {{#link-to 'tutorial.interrupt-closing'}}{{t "tutorial.interrupt_closing"}}{{/link-to}}.
