كيفية الاستماع بشكل صحيح لتحديث ما بعد البث

مطور
1

مرحبًا،

أحاول تشغيل دالة مخصصة عند إضافة محتوى إضافي إلى الصفحة (للنشرات الطويلة) باستخدام واجهة البرمجة التالية:

api.onAppEvent('post-stream:refresh', () => {
       console.log('تم إضافة محتوى جديد إلى الصفحة...');
});

… ومع ذلك، لم ينجح ما سبق. ما الخطأ الذي أقترفه، وما هو الطريقة الصحيحة للقيام بذلك؟

2

هل يمكنك مشاركة المزيد حول ما تحاول تحقيقه؟ هناك عدة واجهات برمجة تطبيقات مختلفة تتيح لك تعديل محتوى المنشور عند عرضه. الأكثر شيوعًا منها هو api.decorateCookedElement

3

في الواقع، أدركت للتو أنني بحاجة إلى تشغيل الدالة على محتوى المنشور المضاف إلى DOM.

أنا أقوم عملياً بإعادة إنشاء واجهة برمجة التطبيقات addPosterIcon، لأن واجهتي يجب أن تحتوي على HTML مخصص. لقد أنجزت كل شيء يعمل بشكل صحيح، باستثناء عندما يتم التمرير في الصفحة الطويلة.

أحاول إضافة أيقونة بجانب اسم مستخدم البوستر، مما يُطلق حدثًا مخصصًا. المشكلة الوحيدة هي أنها لا تُضاف بعد عند حدوث تغيير في DOM.

4

المشكلة مع هذه الطريقة هي أنها تُفعّل كائنات مطبوخة متعددة في وقت واحد، وبالتالي تفضّل استخدام معرف (لتجنب تسرب الذاكرة)، وهو ما لا أحتاجه. ما كان سيفيدني هو إذا تم تفعيل حدث واحد فقط بعد أن تُطبخ جميع العناصر. لدي فكرة حول كيفية تحقيق ذلك، لكن هل توجد طريقة صحيحة للقيام بذلك باستخدام واجهة برمجة تطبيقات Discourse؟

5

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

ولكن بما أنك ترغب في إجراء تعديلات على البيانات الوصفية المحيطة بمحتوى المنشور، فمن المرجح أن decorateCookedElement ليست الخيار الأنسب.

في هذه الحالة، ربما يكون أفضل خيار هو الاطلاع على كيفية تنفيذ واجهة برمجة التطبيقات addPosterIcon:

في الخلفية، إنها استدعاء لوظيفة api.decorateWidget. يمكنك إجراء هذا الاستدعاء بنفسك، ثم جعلها تعرض HTML خام. للحصول على مزيد من المعلومات حول واجهة برمجة التطبيقات decorateWidget، يمكنك الاطلاع على https://meta.discourse.org/t/developer-s-guide-to-discourse-themes/93648#heading--4-c-6

6

كان الحل بالنسبة لي لتشغيل decorateCookedElement مرة واحدة فقط لنوع معين، وعندما يكون المحتوى المطبوخ الأخير جاهزًا، بسيطًا كما يلي:

<script type="text/discourse-plugin" version="0.11">
  api.decorateCookedElement((callback, opts) => {
      if(opts?.widget?.dirtyKeys?.name === 'post-stream') {
          if(this?.cooking) clearTimeout(this.cooking);
          this.cooking = setTimeout(() => {
              console.log('All cooking is done, update new content..');
          });
      }
  });
</script>

يرجى تصحيحي إذا كان هناك أي خطأ أو أي أخطاء محتملة في هذا الكود.

7

عذرًا لإضافة سؤال إلى هذا الموضوع القديم.

كنا نستخدم الكود المذكور أعلاه (decorateCookedElement) لاستدعاء دالة سكريبت قصيرة عند عرض منشورات إضافية في موضوع ما.

مع تدفق المنشورات Glimmer، هذا الترميز لا يعمل بشكل صحيح. نحصل على الرسالة التالية في وحدة تحكم المطور:

الوصول إلى helper.widget غير مدعوم عند استخدام api.decorateCookedElement مع تدفق المنشورات Glimmer وقد يؤدي إلى نتائج غير متوقعة.

ونتيجة لذلك، لا يتم تنفيذ دالة السكريبت.

هل هناك وظيفة مقابلة يمكننا استخدامها لتدفق المنشورات Glimmer؟

شكرًا مقدمًا على أي معلومات لتعديل الترميز الخاص بنا.