Storybook: @ storybook / html 5.0.1 لا يمكنه تشغيل البرامج النصية عند تحميل القصة ، ويعرف أيضًا باسم "DOMContentLoaded" لم يعد مفيدًا

تم إنشاؤها على ١٥ مارس ٢٠١٩ · 6تعليقات · مصدر: storybookjs/storybook

مرحبا يا رفاق! إذن ، هذا هو وضعي: بعض مكوناتي تتطلب جافا سكريبت. يمكنني استدعاء ملف javascript بنجاح في preview-head.html لكن التهيئة مشكلة.

قبل الإصدار 5.0.1 ، كان لدي:

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

وقد نجحت ، لكنها لم تفعل الآن.

لقد كنت أبحث في جميع مستنداتك و Stackoverflow نفسها ولكن لا يمكنني العثور على حل لذلك. يبدو أنه يجب أن يكون شيئًا يجب على Storybook وضعه في الاعتبار.

سيكون موضع تقدير أي مساعدة.

core has workaround question / support

مصدر

BennyZ28

التعليق الأكثر فائدة

@ BennyZ28 ما هو الحل؟

الحل معقد للغاية ، فلماذا لا يوفر كتاب القصص رد اتصال يسمى بعد إضافة القصة إلى شجرة دوم؟

vipcxj في ٤ أبريل ٢٠٢٠

👍17

ال 6 كومينتر

لا تهتم ، تم حلها

BennyZ28 في ١٥ مارس ٢٠١٩

@ BennyZ28 ما هو الحل؟

shilman في ١٥ مارس ٢٠١٩

👍1

shilman في الواقع لم

لذلك ، أي مساعدة لا تزال موضع تقدير!

BennyZ28 في ١٥ مارس ٢٠١٩

عندما تتغير "الصفحة" ، تتم إزالة العنصر div#root القديم الموجود داخل iframe وتتم إضافة عنصر جديد. يمكنك استخدام هذه الميزة ودمجها مع MutationObserver لتشغيل وظيفة في كل مرة تتغير فيها الصفحة.

داخل preview-head.html ، يمكنك إضافة:

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

لفهم كيفية عمل MutationObserver ، يرجى الرجوع إلى وثائق MDN .