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组件未发现modal1布尔值，您在点击按钮时更改application.hbs以显示模式对话框。您需要做的是将modal1属性传递给my-modal。查看twiddle。通过将布尔属性传递给my-modal组件，您现在在application.hbs和my-modal.hbs上修改相同的布尔值。（注意，我更新了旋转以遵守Data Down Action Up原则;因此modal1仅由application而不是my-modal更新。modal1属性现在只是readonly my-modal）。

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

Trigger Bootstrap模式，位于另一个模板的组件中

1 个答案: