هل من الممكن إرفاق معالجات الأحداث بالأدوات في السمة/الإضافة؟

مطور
1

مرحبًا،

أبحث عن إضافة معالج نقر (click handler) لعناصر قائمة الموضوعات الرئيسية (لإضافة سلوك مخصص تحت بعض الشروط). هل من الممكن استخدام شيء مثل api.decorateWidget() لإضافة معالج أحداث إلى كل مثيل لجزء واجهة معين؟

—

منهجيات أخرى تم النظر فيها:

  • ليس عمليًا استخدام addEventListener في دالة عامة لأن عناصر قائمة الموضوعات الإضافية يمكن تحميلها بعد تحميل الصفحة، مثل التمرير اللانهائي. (سيحتاج التنفيذ إلى استخدام شيء مثل MutationObserver لمراقبة التغييرات في DOM وإرفاق معالجات أحداث إضافية مع ظهور المزيد من الواجهات).
  • قد يكون من الممكن إرفاق معالج نقر بـ body ومراقبته عبر انتشار الأحداث (مثل ما يتم عبر jQuery باستخدام $("body").on("click", ".list-item-topic", function()))، لكنني أحتاج إلى القدرة على استخدام preventDefault() و stopPropagation()، وأعتقد أن هذا المنهج لا يدعم ذلك.
2

api.attachWidgetAction هي الطريقة الصحيحة. يمكنك البحث في قاعدة الكود وستكون جاهزًا.

أمثلة هنا

3

آه، شكرًا لك! هل هذه أحداث DOM قياسية؟ أي:

  • من الأمثلة، لا يبدو أن الأحداث هي أحداث DOM قياسية مثل click أو mouseover وما إلى ذلك. هل من الممكن القيام بما يلي مثلًا: api.attachWidgetAction("topic-list-item", "click", ...)؟
  • هل من الممكن الوصول إلى كائن event، على سبيل المثال لتنفيذ event.stopPropagation()؟
  • إذا لم تكن هذه أحداث DOM قياسية، فكيف يمكنني معرفة الأحداث التي يبثها عنصر واجهة مستخدم معين؟

شكرًا على التوجيهات!

4

بالإضافة إلى ذلك: أنا مرتبك قليلاً هنا، لكن كيف يمكنني العثور على “الودجة” (widget) المرتبطة بعنصر واجهة مستخدم معين؟ (في حالتي: الودجة التي تشغّل topic-list-item لعرض موضوع فردي في قائمة المواضيع). من دليل الودجات، لا يبدو أن أيًا منها مرتبط بـ topic-list-item. يبدو أن “المكون” هذا هو المسؤول عن عرض topic-list-item بدلاً من ذلك.

ليست لديّ وضوح حول الفرق بين الودجات (widgets) والمكونات (components) (أعتذر عن عدم معرفتي الكافية) — أفترض أنه من الممكن فقط ربط معالجات الأحداث باستخدام api.attachWidgetAction مع “الودجات” وليس مع “المكونات”. هل هناك مكافئ للمكونات؟

5

حول الودجت والمكون:

6

شكرًا لكم جميعًا! تم حل المشكلة.

للبقية في المستقبل الذين يسعون إلى تجاوز معالجات الأحداث للمكونات، أضف التالي إلى javascripts/your-plugin-name/initializers/script-name-of-your-choice.js.es6:

import { withPluginApi } from "discourse/lib/plugin-api";

export default {
  name: "custom-click-handler",

  initialize() {
    withPluginApi("0.8.20", (api) => {
      api.modifyClass("component:topic-list-item", {
        click(e) {
          ...
        }
      });
    });
  },
};