触发位于另一个模板的组件中的启动模式

Question

我正在使用 ember-bootstrap 及其模态组件在模板上创建模态。目前，模态组件和触发它的按钮位于同一模板上，但是我想将模态移动到组件上，以便保持模板代码干净。

这行得通

//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组件不知道您在单击按钮以显示模式对话框时application.hbs更改modal1布尔值。您需要做的是modal1属性传递给my-modal。看看叽叽喳喳。通过将布尔属性传递给组件my-modal您现在正在修改 application.hbs 和my-modal.hbs上的相同布尔值。(请注意，我更新了 twiddle 以尊重 Data Down Action Up 原则;因此modal1仅由 application 更新，而不是my-modal。 modal1属性现在仅对 my-modal 是只读的。

但是;当尝试在大型项目上显示模态并不仅从application.hbs而且从应用程序中的任何位置触发模态对话时;我通常所做的是创建一个服务并将模态对话框的可见性管理委托给该服务。如果你要开发更大的东西，你应该考虑这种方法。