トリガーブートストラップは、別のテンプレートのコンポーネント内にあるものです。

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でボタンをクリックすると、モーダルダイアログが表示されます。あなたがする必要があるのは属性をmy-modalに渡すことです。 twiddleをチェックしてください。 boolean属性をmy-modalコンポーネントに渡すことで、application.hbsとmy-modal.hbsの両方で同じブール値を変更するようになりました。 （私は、データダウンアクションアップの原則を尊重するように回転を更新したので、modal1はapplicationによってのみ更新され、my-modalではなくmodal1属性は現在my-modalのための読み取り専用です）。

ただし、大きなプロジェクトにモーダルを表示し、モーダルダイアログを起動させるときには、application.hbsだけでなく、アプリケーションのどこからでも実行できます。私は通常、サービスを作成し、そのサービスにモーダルダイアログの可視性管理を委任しています。より大きなものを開発する場合は、そのようなアプローチを検討すべきです。