thats modal Trigger Bootstrap dans un composant à partir d'un autre modèle

Question

J'utilise ember-bootstrap et leur composante modale pour créer un modal sur un modèle. Actuellement le composant modal et le bouton pour le déclencher sont sur le même modèle, cependant je veux déplacer le modal vers un composant afin que je puisse garder le code du template propre.

Cela fonctionne

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

Cela ne fonctionne pas

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

Comment pourrais-je obtenir ainsi le modal est déclenché à partir du modèle d'applications?

Answer 1

Dans votre code, le composant my-modal ne connaît pas modal1 boolean vous changez en application.hbs lorsque vous cliquez sur le bouton pour afficher le dialogue modal. Ce que vous devez faire est de transmettre l'attribut modal1 à my-modal. Découvrez le twiddle. En passant l'attribut booléen au composant my-modal, vous modifiez maintenant le même booléen à la fois sur application.hbs et my-modal.hbs. (Notez que, j'ai mis à jour le twiddle pour respecter le principe Data Down Action Up, de sorte que modal1 est seulement mis à jour par application et non my-modal. L'attribut modal1 est maintenant seulement en lecture seule pour my-modal).

Cependant; lorsque vous essayez d'afficher modal sur un grand projet et de déclencher un dialogue modal non seulement de application.hbs mais de n'importe où dans l'application; Ce que je fais, c'est typiquement créer un service et déléguer la gestion de la visibilité de la boîte de dialogue modale à ce service. Vous devriez envisager une telle approche si vous voulez développer quelque chose de plus grand.