触发来自另一个模板的组件中的 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 布尔值是在单击按钮以显示模式对话框时更改的。您需要做的是将 modal1 属性传递给 my-modal。查看 twiddle。通过将布尔属性传递给 my-modal 组件，您现在可以在 application.hbs 和 my-modal.hbs 上修改相同的布尔值。（请注意，我更新了 twiddle 以遵守 Data Down Action Up 原则；因此 modal1 仅由 application 而不是 my-modal 更新。modal1 属性现在只读my-modal).

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

触发来自另一个模板的组件中的 Bootstrap 模态

Trigger Bootstrap modal thats in a component from another template

javascript

ember.js

ember-bootstrap