Trigger Bootstrap modal das ist in einer Komponente aus einer anderen Vorlage

Question

Ich verwende ember-bootstrap und ihre modale Komponente, um ein Modal auf einer Vorlage zu erstellen. Momentan befinden sich die modale Komponente und die Schaltfläche, um sie auszulösen, auf derselben Vorlage, jedoch möchte ich das Modal in eine Komponente verschieben, damit ich den Vorlagencode sauber halten kann.

Dies funktioniert

//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}} 

Das funktioniert nicht

//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}} 

Wie kann ich es bekomme so die modale von der Anwendungsvorlage ausgelöst wird?

Answer 1

in Ihrem Code my-modal Komponente ist nicht bewusst modal1 boolean Sie in application.hbs auf Schaltfläche ändern klicken Sie auf den modalen Dialog angezeigt werden soll. Was Sie tun müssen, ist modal1 Attribut an my-modal übergeben. Schauen Sie sich die twiddle an. Indem Sie das boolesche Attribut an die my-modal Komponente übergeben, ändern Sie nun den gleichen booleschen Wert für beide unter application.hbs und my-modal.hbs. (Beachten Sie, dass ich den Twiddle aktualisiert habe, um das Data Down Action Up-Prinzip einzuhalten, so dass modal1 nur von application und nicht von my-modal aktualisiert wird. modal1 Attribut ist jetzt nur readonly für my-modal).

Jedoch; wenn versucht wird, Modal auf einem großen Projekt anzuzeigen und modalen Dialog nicht nur von application.hbs, sondern von irgendwo in der Anwendung auszulösen; Ich erstelle normalerweise einen Service und delegiere die Sichtbarkeitsverwaltung des modalen Dialogs an diesen Service. Sie sollten einen solchen Ansatz in Erwägung ziehen, wenn Sie etwas Größeres entwickeln möchten.