كيفية معرفة ما إذا كانت الصفحة قيد التحميل في مكون سمة / عنصر واجهة مستخدم؟

مطور
1

أشعر أنني على الأرجح أفتقد شيئًا واضحًا هنا، لكنني لا أستطيع اكتشافه. لدي مكون سمة يقوم بتحميل بعض الأدوات (widgets)، وأستخدم الكود التالي لإعادة عرضها بعد أن ينتقل المستخدم إلى صفحة جديدة (مأخوذ من لافتات التصنيفات):

api.decorateWidget("my-widget:after", (helper) => {
    helper.widget.appEvents.on("page:changed", () => {
      helper.widget.scheduleRerender();
    })
});

ومع ذلك، ينتظر هذا الكود حتى يتم تحميل الصفحة الجديدة لتحديث الأداة. ما آمل في تحقيقه هو إخفاء محتوى الأداة فورًا عند النقر على رابط للانتقال إلى صفحة أخرى، تمامًا كما تفعل وظيفة Discourse الأصلية في إخفاء العناصر وإظهار مؤشر تحميل (spinner) فور النقر.

أرى في ملف app\assets\javascripts\discourse\app\templates\discovery.hbs أن حاوية div تراقب متغير “loading”، لكنني لا أستطيع معرفة مصدره وكيفية “الالتحاق” به أو مراقبة حالة التحميل في الأداة الخاصة بي.

أقدر أي إجابات أو مجرد توجيهي إلى الاتجاه العام الصحيح. :slight_smile:

شكرًا،

Zach

2

اعتقدتُ أنني سأعيد رفع هذا الموضوع — يسعدني دفع رسوم لدعم متميز للحصول على إجابة إذا لزم الأمر.

3

هل يمكنك وصف السلوك المطلوب باختصار، وعلى أي صفحات بالضبط؟

4

يمكنك تجربة queueRerender() بدلاً من scheduleRerender()

5

شكرًا على ردودكم يا رفاق.

لدي عدد من الأدوات (widgets) التي قمت بإنشائها لصفحات فئات معينة، وأود مثاليًا إخفاؤها فورًا بمجرد التنقل بعيدًا عن الصفحة. إليك فيديو تجريبي مدته 45 ثانية يوضح ما أهدف إليه: Google Chrome - Latest Rental Cities/California topics - Afford Anything Forums - Google Chrome | Loom

@hawm لست متأكدًا من أن إعادة تصيير الطابور هو ما أحتاجه هنا، لأن الأمر لا يتعلق بإعادة تصيير أدواتي، بل يتعلق بمنح أدواتي وعيًا بما إذا كان تطبيق Discourse العالمي يقوم بتحميل صفحة جديدة أم لا.

6

بما أن الأمر قصير، يجب أن تكون الشرطية داخل القالب. أي:

{{#if xyz}}
الكود الخاص بك
{{/if}}

قوالب Ember ديناميكية. إذا تغيرت القيمة، سيتم إخفاء الواجهة.

7

نعم، بالطبع. :slight_smile: أنا لا أعاني من صعوبة في بناء جملة if/then؛ ما أطلبه هو معرفة ما إذا كان هناك طريقة للتحقق مما إذا كان Discourse يقوم حاليًا بتحميل صفحة جديدة.

8

أعتقد أن اختراق مسار discovery باستخدام واجهة برمجة التطبيقات modifyClass ثم تشغيل حدث مخصص سيعمل.

https://api.emberjs.com/ember/3.12/classes/Route

يأتي متغير loading من مسار discovery الذي ذكرته أعلاه. قد لا تتمكن الودجت المرفقة بـ plugin-outlet من الوصول إليه لأنها لا تُمرر كحجة، وهذا يعتمد على تعريف plugin-outlet.

9

حسناً، شكراً جزيلاً. سأقوم بالبحث قليلاً لأرى ما سأجده، وسأحدّث هذا المنشور بحلّ للأجيال القادمة إذا عثرت على واحد :slight_smile:

10

تمكّنتُ أخيرًا من العثور على حل. قضيتُ وقتًا طويلاً جدًا في هذا، وبالنسبة لي يستحق دمج هذا الحل في النواة (core) لأنّه في رأيي كان يجب أن يكون موجودًا هناك أساسًا.

أضفتُ الكود أدناه إلى مكوّن السمة (theme component) الخاص بي؛ ما يفعله هو إضافة فئة “loading” إلى وسم body بمجرد بدء التوجيه (routing)، ثم إزالتها بمجرد اكتمال التوجيه. ربما يكون هذا الأمر بسيطًا أو بديهيًا للأشخاص الذين يعرفون Ember، لكنه استغرق مني وقتًا طويلاً بشكل فاضح (ومحاولة ملايين الأشياء + قراءة جميع المواضيع التي تمكنت من العثور عليها هنا) لفهمه.

مع وجود هذا الكود الأساسي، يمكنني إضافة أيقونات التحميل وغيرها إلى مختلف الأدوات (widgets) الخاصة بي، بحيث يتحكّم وجود فئة CSS المسماة loading في وسم body في تنسيق CSS الخاص بها وإمكانية رؤيتها.

initialize() {
    withPluginApi("0.8.8", (api) => {
      const router = api._lookupContainer('router:main');
      router.reopen({
        addLoadingCSSClassToBody: function() {
          document.body.classList.add("loading");
        }.on('willTransition')
      });

      router.reopen({
        removeLoadingCSSClassFromBody: function() {
          document.body.classList.remove("loading");
        }.on('didTransition')
      });
    });
  },
};
11

الكود الذي أشاركه ليس من عنصر واجهة مستخدم (widget)، بل هو من مكون قمنا بإصداره للتحميل هنا على موقع Meta.

في هذا الكود، نستخدم الموجه (router) مع @discourseComputed للتحقق مما إذا كان المسار قد تغير، ثم نقوم بالتصيير بناءً على ذلك.

يمكنك التعمق في الكود إذا كنت مهتمًا بكيفية عمله.