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 요청 하나를 절약할 수 있습니다. 다음을 시도해 보세요(귀하의 코드 기반).

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

// add a nav item for each category
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

조, 고마워요. 지금은 아주 잘 작동하고 있어요.