ajax 호출 후 pluginOutlet에 내용을 수동으로 추가하는 방법? pluginOutlet을 다시 렌더링하거나 새로고침하는 방법?

개발
2

맞습니다. 이를 수행하는 두 가지 방법이 있습니다…

  1. 커스터마이징을 위젯으로 만든 다음, 다음과 같이 플러그인 아웃렛에 위젯을 마운트할 수 있습니다:

    {{mount-widget widget="widget-name"}}

    Discourse에서 위젯이 생성되는 예시를 확인해 볼 수 있습니다. 예를 들어 홈 로고: discourse/app/assets/javascripts/discourse/app/widgets/home-logo.js at 2dbcea9eeeb816dda347027497b3a49634ef851f · discourse/discourse · GitHub

    테마에서는 widget-name.js 파일을 javascripts/discourse/widgets 디렉터리에 추가해야 합니다.

    위젯에 대한 더 자세한 내용은 A tour of how the Widget (Virtual DOM) code in Discourse works 에서 확인할 수 있지만, 점진적으로 위젯을 단계적으로 폐지할 예정이므로 이 과정에서 배우는 것은 장기적으로 유용하지 않을 수 있다는 점을 유의하세요.

  2. 위젯 데코레이터를 그대로 유지하고, 플러그인 아웃렛에서 원하는 작업을 수행하는 별도의 Ember 컴포넌트를 생성합니다. 우리는 위젯 대신 Ember 컴포넌트(Discourse의 대부분이 이 기반으로 구축됨)를 단계적으로 도입하고 있습니다.

    이 과정은 다음과 같습니다:

    1. 테마의 javascripts/discourse/components 디렉터리에 컴포넌트 JS 및 HBS(템플릿) 파일을 생성합니다.

    • component-name.js

    • component-name.hbs

    1. Ember 컴포넌트를 구축합니다… 불행히도 이 단계는 기본적으로 “Ember 배우기” (Ember Guides)이지만, 시작하는 데 대략적인 아이디어를 줄 수 있을 것입니다:
    • component-name.js 내부:
    import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";

const endpoint = settings.site_navigation_links_endpoint;

export default class ComponentName extends Component {
  @tracked navLinks = null;

  @action
  async fetchNavLinks() {
   try {
      const response = await fetch(endpoint);
      const data = await response.json(); // assuming this is json
      this.navLinks = data;
    } catch (error) {
      console.error("Failed:", error);
    }
  }
}
    • component-name.hbs 내부:
    <div {{did-insert this.fetchNavLinks}}>
 {{#each this.navLinks as |link|}}
   <a href={{link.anchor}}>{{link.title}}</a>
 {{/each}}
</div>

    이것은 컴포넌트가 삽입될 때마다(이 경우, Discourse 사이트를 방문하고 앱이 렌더링될 때) fetchNavLinks 액션을 호출합니다. navLinks가 업데이트되면 추적(tracked) 속성이기 때문에 컴포넌트의 내용이 업데이트됩니다.

    컴포넌트 렌더링보다 더 자주 링크를 업데이트하려면, 예를 들어 현재 라우트(페이지)가 특정 조건을 충족하는지 확인하는 등의 추가 로직을 이 JS에 추가해야 합니다.

    1. 이 컴포넌트는 javascripts/discourse/connectors/below-site-header/my-component-connector.hbs 파일에 아웃렛에 추가함으로써 플러그인 아웃렛에 추가됩니다:
    <ComponentName />