Триггер Bootstrap модальный, который в компоненте из другого шаблона

Question

Я использую http://www.ember-bootstrap.com/ и их модальный компонент для создания модального шаблона. В настоящее время модальный компонент и кнопка для его запуска находятся в одном и том же шаблоне, однако я хочу переместить модальный компонент, чтобы сохранить код шаблона чистым.

Это работает

//application/template.hbs
{{#bs-button onClick=(action (mut modal1) true)}}Open Modal{{/bs-button}}

{{#bs-modal-simple open=modal1 title="Simple Dialog" size="sm" onHidden=(action (mut modal1) false)}}
  Hi there
{{/bs-modal-simple}}

Это не работает

//application/template.hbs
{{#bs-button onClick=(action (mut modal1) true)}}Open Modal{{/bs-button}}
{{my-modal}}

//components/my-modal/template.hbs
{{#bs-modal-simple open=modal1 title="Simple Dialog" size="sm" onHidden=(action (mut modal1) false)}}
  Hi there
{{/bs-modal-simple}}

Как я могу получить его, чтобы модал запускался из шаблона приложения?

Answer 1

В вашем коде my-modal компонент не знает о modal1 логическое вы меняете в application.hbs после нажатия кнопки, чтобы отобразить модальное диалоговое окно. Что вам нужно сделать, это пройти modal1 приписывать my-modal, Проверьте тиддл. Передав логический атрибут my-modal компонент, который вы сейчас модифицируете один и тот же логический как на application.hbs а также my-modal.hbs, (Обратите внимание, что я обновил твидл, чтобы соблюдать принцип Data Down Action Up; modal1 обновляется только application и не my-modal, modal1 атрибут теперь доступен только для чтения my-modal).

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