كيفية تجاوز DOMContentLoaded للتنقل

لدينا دالة جافاسكريبت تعمل عند تحميل DOM، document.addEventListener(“DOMContentLoaded”, OURFUNCTION).

إنها تعمل بشكل جيد عند تحديث المتصفح، ولكنها لا تظهر أبدًا عند التنقل في الموقع. أفترض أن ذلك لأن Discourse يقوم بتحميل DOM مرة واحدة فقط ثم يتم التعامل مع الباقي عن طريق التنقل من جانب العميل، مثل SPA. لذلك أتساءل، كيف يمكننا تشغيل الدالة عند تغيير التنقل في Discourse نفسه؟ كانت هناك طرق سهلة للقيام بذلك عبر واجهة برمجة تطبيقات المكونات الإضافية، ولكن تم إيقاف استخدام واجهات برمجة التطبيقات هذه ولم أعد أراها مستخدمة في أي مكونات. هل هناك طريقة سهلة للقيام بذلك حتى الآن؟ أم نحتاج إلى إنشاء مكون كامل لتنفيذ بعض جافاسكريبت عند تغيير التنقل؟ شكرًا.

مرحباً،

إذا كنت تبحث عن حدث يسمى عند تحميل الصفحة، فهناك api.onPageChange.

api.onPageChange((url, title) => {
   console.log('the page changed to: ' + url + ' and title ' + title);
});

إذا كنت تبحث عن شيء آخر، هل يمكنك توضيح ما تريد تحقيقه؟ يمكننا أن نقدم لك إجابة أكثر دقة.

على صعيد آخر، لديك الكثير من الوثائق التي قد تجدها مفيدة: Developer Guides - Discourse Meta.

3 إعجابات

هممم… لست متأكدًا من أن هذا يضمن تحميل محتوى DOM، أعتقد أنه يتم تشغيله عند تغيير المسار، وهو أسبق بكثير.

ستحتاج إلى التفكير في إرفاق مكون بمنفذ إضافة وتشغيله في مُعدِّل didInsert إذا كان تحميل DOM مهمًا.

إذا كان تغيير المسار فقط هو المهم، فعندئذٍ نعم، يجب أن يقوم onPageChange بذلك :+1:

إعجاب واحد (1)

قد تكون على حق! :thinking:

يتم استدعاء onPageChange في دورة التشغيل التالية، لذلك أعتقد أنه سيتم استدعاؤه بعد DOMContentLoaded في معظم الحالات، ولكن لا يمكنني القول إنه مضمون.

أرى استخدامًا يعتمد على onPageChange ويقوم بأشياء عناصر DOM مباشرة. من أين يتم إطلاق حدث routeDidChange بالمناسبة (تحرير: إنه من ember: RouterService | 6.7.0 | Ember API Documentation)?

أتفق مع معدّل didInsert، إنه رائع حقًا!

إعجاب واحد (1)

شكراً. لقد قرأت الوثائق بشكل مكثف، ووفقًا لتعليقاتي ومتابعة عضو في منتدى النقاش هناك، فإن واجهة برمجة تطبيقات المكونات الإضافية قديمة وسيتم إيقافها قريبًا. لذا، بينما قد يعمل الكود الخاص بك الآن، إلا أنه سيتعطل قريبًا، أعتقد في التحديثات المستقبلية. لهذا السبب أبحث عن حل أفضل. يبدو مبالغًا فيه إنشاء مكون Glimmer لهذا، لذلك كنت آمل أن يكون هناك حدث آخر يمكننا استخدامه.

لا أعتقد أن هذا صحيح.

تم تحديثه الأسبوع الماضي.

ما تم إيقافه هو:

  • واجهة برمجة تطبيقات الويدجت
  • القوالب الخام
  • تجاوز القوالب بشكل عام
3 إعجابات

شكراً للتوضيح! إذن هي واجهة برمجة تطبيقات الأداة (widget api) فقط. حسناً، سأجرب اقتراحات واجهة برمجة التطبيقات المذكورة أعلاه أولاً.

3 إعجابات

هذا نوع من النعمة :sweat_smile:، Glimmer أكثر صداقة للمطورين بكثير

إعجابَين (2)

بالمناسبة، لقد اختبرناها باستخدام api.OnPageChange وعملت بشكل جيد. لم نواجه بعد حالة لم يكن فيها محتوى DOM متاحًا عند استدعاء OnPageChange، لذلك يبدو أنه يتم تشغيله بعد DomContentLoaded. لكن، لا يمكنني التأكد بنسبة 100٪. شكرًا لمساعدتك في هذا.

3 إعجابات

جيد. فقط كن على علم بأن التوقيت غير مضمون. ولكن يسعدني أنه يعمل لحالة الاستخدام الخاصة بك!

إعجاب واحد (1)

هل يمكنك شرح هذا بشكل أفضل؟ ما هو مُعدِّل didInsert؟ أنا أعمل على decorateCookedElement. شكرًا.

إعجاب واحد (1)
إعجاب واحد (1)

الوثيقة هي الطريق الصحيح كما أشار روبرت؛ يمكنك أيضًا رؤية الكثير من الأمثلة على المستودع: Code search results · GitHub

إعجاب واحد (1)

أوه، حسنًا، إذن هذه ميزة في Ember ولا تتعلق بـ Discourse؟ الجزء الوحيد في الكود الذي يتعلق حقًا بـ “Discourse” سيكون pluginoutlet؟

إعجاب واحد (1)

نعم، إنه جزء من معيار Glimmer

pluginOutlets هي مجرد مكونات خاصة مصممة لتركيب مكونات أخرى:

إعجابَين (2)