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
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}`;
    }
  });
});
「いいね！」 1
3

ジョーさん、ありがとうございます。今はとてもうまく動いています。

「いいね！」 2