Wie aktualisiere ich ein bestimmtes Widget nach dem Abrufen von Daten von Ajax

Entwickler
1

Hallo, ich versuche, eine benutzerdefinierte Navigationsleiste für meine Discourse-Website zu implementieren. Hier ist mein aktueller Code:

  $.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}`;
                }
            })              
        })
        
    }
  );

Momentan muss ich manuell zu einem anderen Link navigieren, damit die neu hinzugefügten Navigationselemente angezeigt werden. Wie kann ich die Navigationsleiste neu laden, nachdem die Werte per AJAX abgerufen wurden?

Vielen Dank!

2 „Gefällt mir“
2

Das Problem hier ist, dass dein Code zum Hinzufügen neuer Navigationselemente erst ausgeführt wird, nachdem die Ajax-Anfrage abgeschlossen ist. In den wenigen Millisekunden, die dafür benötigt werden, wird das Standard-Navigationsmenü (unmodifiziert) angezeigt. Deshalb siehst du es bei der ersten Seitenansicht.

Sobald du zu einer anderen Seite navigierst, ist die Anfrage abgeschlossen und deine Änderungen funktionieren dann.

Um deine Frage zu beantworten: Ja, du kannst eine Komponente bedingt neu rendern.

Das ist jedoch nicht wirklich die Antwort, die du suchst. Du brauchst die Ajax-Anfrage gar nicht. Die Liste der Kategorien kannst du direkt aus der Anwendung abrufen. Das löst dein Problem und spart dir eine zusätzliche HTTP-Anfrage. Versuche es mal mit etwas Ähnlichem (basierend auf deinem Code).

// Kategorien nachschlagen
const categoryList = api.container.lookup("site:main").categories;

// Für jede Kategorie ein Navigationselement hinzufügen
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}`;
    }
  });
});
1 „Gefällt mir“
3

Vielen Dank, Joe. Es funktioniert jetzt sehr gut.

2 „Gefällt mir“