0

我正在使用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}}

我怎样才能得到它，以便从应用程序模板触发模态？

4

1 回答 1

1

在您的代码中，my-modal组件不知道您在单击按钮以显示模式对话框时modal1更改的布尔值。application.hbs您需要做的是将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应用程序中的任何位置而且从应用程序的任何位置触发模态对话框时；我所做的通常是创建一个服务并将模态对话框的可见性管理委托给该服务。如果您要开发更大的东西，您应该考虑这种方法。

于 2017-03-16T05:26:52.523 回答