جافاسكريبت التي تستهدف التذييل لا تعمل بعد انتقالات الصفحة

مطور
4

ربما توجد عدة طرق لمعالجة هذه المشكلة، لكن دعنا نجرب الطريقة “الصحيحة” باستخدام أدوات التخصيص المناسبة.

عند إضافة HTML إلى قسم التذييل في سمة ما، يقوم Discourse ببعض المعالجة لذلك لمنع القفز بين انتقالات الصفحات أو عند إضافة عناصر إضافية مع التمرير اللانهائي.

يتم إضافته كمكون custom-html هنا.

discourse/app/assets/javascripts/discourse/app/templates/application.hbs at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

إذا نظرت إلى كود المكون، ستلاحظ أنه يُطلق حدث تطبيق عند عرضه.

discourse/app/assets/javascripts/discourse/app/components/custom-html.js at a0bbc346cb5d5b89d1a3efdfa89869349a8b067f · discourse/discourse · GitHub

هذه هي الأداة التي تحتاج إلى استخدامها.

كيف تستخدمها؟
توجد طريقة في plugin-api تتيح لك تشغيل كود عند إطلاق حدث تطبيق محدد.

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/lib/plugin-api.js#L507-L519

وبما أننا نعرف بالفعل اسم الحدث، يمكننا استخدامه كما يلي:

api.onAppEvent("inserted-custom-html:footer", () => {
  // قم بعملك هنا
});

وبما أن هذه طريقة خاصة بـ plugin-API، يجب عليك تغيير نوع وسم السكربت إلى text/discourse-plugin كما يلي:

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  // قم بعملك هنا
});
</script>

ستعمل المقطع أعلاه دائمًا عند عرض التذييل. لذا، يمكنك الآن القيام بشيء مثل هذا:

<script type="text/discourse-plugin" version="0.8">
api.onAppEvent("inserted-custom-html:footer", () => {
  $(".footer-div #footerNavDiv").click(function () {
    console.log("تم التقاط حدث النقر");
    // قم بعملك هنا لحدث النقر
  });
});
</script>

يمكنك قراءة المزيد حول plugin-API هنا

5 إعجابات