كيفية تحديث ويدجت معين بعد الحصول على بيانات من ajax

مطور
1

مرحبًا، لقد كنت أحاول تنفيذ شريط تنقل مخصص لموقع Discourse الخاص بي، وفيما يلي الكود الخاص بي الآن:

$.ajax("/categories.json").then(
  (data) => {
    data.category_list.categories.map((val) => {
      api.addNavigationBarItem({
        name: val.name,
        displayName: val.name,
        title: val.name,
        href: `/c/${val.slug}`,
        forceActive: (category, args, router) => {
          return router.currentURL === `/c/${val.slug}`;
        }
      });
    });
  }
);

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

2

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

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

للإجابة على سؤالك، نعم، يمكنك إعادة عرض المكون بشكل مشروط.

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

// البحث عن الفئات
const categoryList = api.container.lookup("site:main").categories;

// إضافة عنصر قائمة لكل فئة
categoryList.map(val => {
  api.addNavigationBarItem({
    name: val.name,
    displayName: val.name,
    title: val.name,
    href: `/c/${val.slug}`,
    forceActive: (category, args, router) => {
      return router.currentURL === `/c/${val.slug}`;
    }
  });
});
3

شكرًا لك، جو. إنها تعمل بشكل ممتاز الآن.