如何在使用 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

谢谢 Joe，现在运行得非常顺利。

2 个赞