javascript - 触发来自另一个模板的组件中的 Bootstrap 模式

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 bool 值对话。您需要做的是将 modal1 属性传递给 my-modal。查看twiddle 。通过将 bool 属性传递给 my-modal 组件，您现在可以在 application.hbs 和 my-modal.hbs 上修改相同的 bool 值。 (请注意，我更新了旋转以尊重数据向下操作向上原则；因此 modal1 仅由 application 更新，而不由 my-modal 更新.modal1 属性现在对于 my-modal 来说是只读的。

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