Storybook: @ storybook / html 5.0.1 tidak dapat menjalankan skrip pada pemuatan cerita, alias 'DOMContentLoaded' tidak membantu lagi

Dibuat pada 15 Mar 2019 · 6Komentar · Sumber: storybookjs/storybook

Halo semuanya! Jadi, inilah situasi saya: beberapa komponen saya memerlukan javascript. Saya berhasil memanggil file javascript di preview-head.html tetapi, memulainya adalah masalah.

Sebelum v5.0.1, saya dulu memiliki:

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

dan berhasil, tetapi sekarang tidak.

Saya telah memeriksa semua dokumen Anda dan Stackoverflow itu sendiri, tetapi saya tidak dapat menemukan solusi untuk ini. Rasanya itu harus menjadi sesuatu yang harus dipertimbangkan oleh Buku Cerita.

Bantuan apa pun akan dihargai.

core has workaround question / support

Sumber

BennyZ28

Komentar yang paling membantu

@ BennyZ28 apa solusinya?

Solusinya terlalu rumit, mengapa buku cerita tidak menyediakan panggilan balik yang baru saja dipanggil setelah cerita ditambahkan ke pohon dom?

vipcxj pada 4 Apr 2020

👍17

Semua 6 komentar

Tidak masalah, terselesaikan

BennyZ28 pada 15 Mar 2019

@ BennyZ28 apa solusinya?

shilman pada 15 Mar 2019

👍1

@shilman Sebenarnya saya belum menyelesaikannya, saya pikir saya memiliki terlalu banyak jam di depan layar tetapi saya salah.

Jadi, bantuan apa pun tetap dihargai!

BennyZ28 pada 15 Mar 2019

Setiap kali 'halaman' berubah, elemen div#root di dalam iframe dihapus dan yang baru ditambahkan. Anda dapat menggunakan fitur ini dan menggabungkannya dengan MutationObserver untuk menjalankan fungsi setiap kali halaman berubah.

Di dalam preview-head.html Anda, Anda dapat menambahkan:

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);

Untuk memahami cara kerja MutationObserver , silakan merujuk ke dokumentasi MDN .