{{t "tutorial.presenter_and_manager"}}

Addon ember-dialog состоит из 3х частей: из компонента (presenter), сервиса (dialog manager) и набора основных layouts. Модальные окна создаются через сервис (см. Dialog Manager). Примеры создания диалоговых окон можете посмотреть на странице {{#link-to 'tutorial.creating'}}создание первого окна{{/link-to}}.

Dialog Manager

Сервис через который создаются и удаляются модельные окна, является singleton. Он доступен изо всех контроллеров (имя свойства `dialog`) по-умолчанию и может быть injected в любой класс, находящийся в регистре приложения. Основным методом для создания окна является show.

Аргумент Тип Комментарий
layout String | Object Может быть передан как путь до шаблона или как предкомпилированный шаблон.
template String | Object

Может быть передан как путь до шаблона или как предкомпилированный шаблон.

Передача пути до шаблона: 

dialog.show("dialog/alert", "messages/error-message");

В модельном окне будет показано содержимое шаблона, который находится тут: app/templates/messages/error-message.

Передача предкомпилированного шаблона: 

import hbs from 'htmlbars-inline-precompile';
dialog.show("dialog/alert", hbs`Hello world!`);
context * Object

Объект, который кладется в специальное свойство компонента диалогового окна - contextObject. Любое свойство объекта или функцию можно получить из шаблона или лейаута.

Пример: {{contextObject.model.first_name}}
options * Object

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

Пример если создать диалоговое окно так: 

dialog.show("dialog/alert", "message", null, { username: "Vladimir Milkov" });

В шаблоне можно вывести username так: 

{{username}}

Так как по объекту создается Presenter можно изменить свойства модального окна (см. Presenter).
componentName="presenter" * String

Имя компонента диалогового окна.

Рассмотрим пример вызова диалогового окна:

Controller



Layout




Template





 (диалоговое окно появится справа внизу).




  

    
Обратите внимание, что вы можете перемещаться по сайту - окно будет оставаться на месте. Круто, не правда ли? :)

  





Вместо пути до шаблона можно использовать hbs функцию, так:



Controller





Но я не рекомендую злоупотреблять таким подходом - он может использоваться в тестах. Лучше делать так:







  

    
{{partial "tutorial/presenter-and-manager/partials/partial-1"}}

  








В ember-addon предусмотренно 3 базовых layouts: alert, confirm и blank. Ознакомиться с ними вы можете на странице {{#link-to 'tutorial.creating-dialog-templates'}}{{t "tutorial.creating_dialog_templates"}}{{/link-to}}.




    

      Аргумент
      Тип
      Комментарий
    

    

      template
      String | Object
      
        
Может быть передан как путь до шаблона или как предкомпилированный шаблон.

        
Передача пути до шаблона: 
dialog.show("dialog/alert", "messages/error-message");

        
В модельном окне будет показано содержимое шаблона, который находится тут: app/templates/messages/error-message.

        
Передача предкомпилированного шаблона:
          
import hbs from 'htmlbars-inline-precompile';
dialog.show("dialog/alert", hbs`Hello world!`);

        

      		
    

    

      context *
      Object
      
        
Объект, который кладется в специальное свойство компонента диалогового окна - contextObject. Любое свойство объекта или функцию можно получить из шаблона или лейаута.

        
Пример: {{contextObject.model.first_name}}

      		
    

    

      options *
      Object
      
        
Объект с которым создается Presenter, влияет на поведение диалогового окна. Также поскольку свойства объекта кладутся в Presenter - они доступны из шаблона.

        
Пример если создать диалоговое окно так: 
dialog.show("dialog/alert", "message", null, { username: "Vladimir Milkov" });

        
В шаблоне можно вывести username так: 
{{username}}

        
Так как по объекту создается Presenter можно изменить свойства модального окна (см. Presenter).

      		
    

    

      componentName="presenter" *
      String
      
        
Имя компонента диалогового окна.

      		
    





Presenter



Компонент диалогового окна, создается с указанием layout и template. Его свойств могут быть получены из них и влиять на внешний вид диалогового окна. Аттрибуты компонента можно изменить или дополнить при создании, путем передачи в метод show аргумента options. Таким образом внешний вид диалогового окна может определяться при его создании, как в контроллере который запрашивает его создание, так и менеджером, который его создает. Более подробно об этом вы можете почитать на странице {{#link-to 'tutorial.advanced-creating-dialog'}}{{t "tutorial.advanced_creating_dialog"}}{{/link-to}}.



При создании диалогового окна может быть изменен `contextObject` компонента путем передачи в метод show аргумента context (см. выше). Поскольку на практике диалоговые окна создаются из actions контроллера (но не только), как правило контектом указывается сам контроллер.



Controller





Template: messages/foo





Какая же разница между context и options. Все что передается в options "мержится" в компонент, а context записывается в конкретное свойство компонента. Также в options могут быть переданы специальные названия actions, будут выполняться при закрытии диалогового окна (acceptHandler и declineHandler), тем самым в этих actions можно реализовать логику по которой окно будет закрываться. Подробнее о прерывании закрытия вы можете почитать на странице {{#link-to 'tutorial.interrupt-closing'}}{{t "tutorial.interrupt_closing"}}{{/link-to}}. Здесь приведу лишь пример из которого, я надеюсь станет ясно для чего это нужно и как работает:



Controller





Узнать как работает перекрытие вы можете изучив метод show у Dialog Manager.