Storybook: @ storybook / html 5.0.1 ne peut pas exécuter de scripts lors du chargement de l'histoire, alias 'DOMContentLoaded' n'aide plus

Créé le 15 mars 2019 · 6Commentaires · Source: storybookjs/storybook

Salut les gens! Alors, voici ma situation: certains de mes composants nécessitent du javascript. Je peux appeler avec succès le fichier javascript dans preview-head.html mais l'initialisation pose un problème.

Avant la v5.0.1, j'avais l'habitude d'avoir:

document.addEventListener("DOMContentLoaded", function(event) {
        /* The stuff I needed to initialise */
    }, false);

et cela a fonctionné, mais maintenant ce n'est pas le cas.

J'ai regardé partout dans vos documents et Stackoverflow lui-même, mais je ne trouve pas de solution à cela. On a l'impression que cela devrait être quelque chose que Storybook devrait prendre en compte.

Toute aide serait appréciée.

core has workaround question / support

Source

BennyZ28

Commentaire le plus utile

@ BennyZ28 quelle était la solution?

La solution de contournement est trop complexe, pourquoi le livre de contes ne fournit-il pas un rappel juste après l'ajout de l'histoire à l'arbre dom?

vipcxj le 4 avr. 2020

👍17

Tous les 6 commentaires

Nevermind, résolu

BennyZ28 le 15 mars 2019

@ BennyZ28 quelle était la solution?

shilman le 15 mars 2019

👍1

@shilman En fait, je ne l'ai pas résolu, je l'ai traversé après trop d'heures devant l'écran mais je me suis trompé.

Donc, toute aide toujours appréciée!

BennyZ28 le 15 mars 2019

Chaque fois que la «page» change, l'ancien élément div#root à l'intérieur du iframe est supprimé et un nouveau est ajouté. Vous pouvez utiliser cette fonctionnalité et la combiner avec MutationObserver pour exécuter une fonction à chaque fois que la page change.

Dans votre preview-head.html , vous pouvez ajouter:

function runOnInit() {
  console.log('Init')
}
function runOnPageChange() {
  console.log('Page has changed!')
}
document.addEventListener('DOMContentLoaded', function() {
  runOnInit();
  const callback = function(mutationsList) {
    for (let i = 0, len = mutationsList.length; i < len; i++) {
      if (mutationsList[i].type == 'childList') {
        runOnPageChange();
        break;
      }
    }
  };

  const observer = new MutationObserver(callback);
  const config = { childList: true, subtree: false };
  observer.observe(document.getElementById('root'), config);
}, false);

Pour comprendre comment fonctionne MutationObserver , veuillez consulter la documentation MDN .

d4nyll le 18 mars 2019

👍10 ❤5 🚀2

🙏

BennyZ28 le 18 mars 2019

@ BennyZ28 quelle était la solution?

La solution de contournement est trop complexe, pourquoi le livre de contes ne fournit-il pas un rappel juste après l'ajout de l'histoire à l'arbre dom?

vipcxj le 4 avr. 2020

👍17

Cette page vous a été utile?

0 / 5 - 0 notes