Bouton de re-basculement de Bootstrap après que Ember l'ait déjà basculé lors du re-rendu

Question

J'ai un bouton comme défini ci-dessous.

<button type="button" 
    class="btn btn-primary-outline {{if shouldBeActive "active"}}" 
    data-toggle="button" 
    {{action "makeActive"}}>MyButton</button> 

L'action makeActive permet de basculer la propriété shouldBeActive, ce qui provoque le bouton pour gagner ou perdre la classe .active quand Ember re-rend le modèle.

Tout cela est une grande ... sauf que les bootstrap.js cliquez sur Gestionnaire pour basculer .active classe du bouton est alors Déclenché après l'Ember a mis à jour le DOM, ce qui provoque le bouton pour être basculée dans l'état basculée incorrect.

Existe-t-il un moyen éloquent pour résoudre ce problème? Ma seule pensée est que je pouvais faire quelque chose de stupide comme ...

<button type="button" 
    class="btn btn-primary-outline {{if (xor shouldBeActive isFirstRender) "active"}}" 
    data-toggle="button" 
    {{action "makeActive"}}>MyButton</button> 

... pour régler efficacement l'état actif à l'opposé de ce qui est prévu et laissez-bootstrap bascule à ce qui est approprié.

Answer 1

On dirait que le gestionnaire de démarrage Bootstrap ne se déclenchera que si vous conservez data-toggle="button", donc le supprimer devrait entraîner le déclenchement du gestionnaire Ember uniquement.