Como atualizar um widget específico após obter dados do ajax

Dev
1

Olá, tenho tentado implementar uma barra de navegação personalizada para o meu site Discourse e abaixo está o meu código agora:

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

Agora preciso ir manualmente para outro link para que os novos itens de navegação adicionados apareçam. Como posso recarregar a barra de navegação após obter os valores do AJAX?
Obrigado.

2 curtidas
2

O problema aqui é que seu código para adicionar os novos itens de navegação só é executado após a conclusão da solicitação AJAX. Assim, nos poucos milissegundos que isso leva, a navegação padrão (não modificada) é exibida. É por isso que você a vê na visualização inicial da página.

Ao navegar para outra página, a solicitação já terá sido concluída e suas alterações começarão a funcionar.

Para responder à sua pergunta: sim, é possível renderizar condicionalmente um componente.

Dito isso, essa não é realmente a solução que você procura. Você nem precisa da solicitação AJAX. Você pode obter a lista de categorias diretamente do aplicativo. Isso resolve seu problema e economiza uma solicitação HTTP extra. Tente algo assim (com base no seu código):

// busca as categorias
const categoryList = api.container.lookup("site:main").categories;

// adiciona um item de navegação para cada categoria
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 curtida
3

Obrigado, Joe. Está funcionando muito bem agora.

2 curtidas