Discourse의 Ember API를 사용해 iframe을 삽입할 때 문제가 발생합니다

개발
8

다음과 같은 몇 가지 포인트를 안내해 드립니다:

  • 사이트 설정이 서비스로 이동되었습니다:

    const siteSettings = container.lookup('service:site-settings');
if (!siteSettings.docuss_enabled) {
  return;
}

  • location:discourse-location → location:history

  • afterRender().then(() => onAfterRender(container));
    afterRender는 컴포넌트 클래스의 메서드 위에 붙이는 데코레이터입니다. 함수로 직접 사용하는 것은 의도된 사용법이 아닙니다.
    아마도 (필요해 보이지는 않지만) 아래처럼 사용하려는 것 같습니다:

    import { schedule } from '@ember/runloop';
schedule("afterRender", () => onAfterRender(container))

  • composeStateChanged 함수에서 상당 부분의 코드가 빠져 있는 것 같습니다.
    또한, 여기서 라우터 서비스를 사용할 수 있습니다: container.lookup('router:main').transitionTo(path); → this.router.transitionTo(path);

  • 헤더가 현대화되었습니다. 현재 컨텍스트에서 home-logo 위젯의 커스터마이징은 비추천(deprecated)됩니다. 자세한 내용은 여기에서 확인하세요: Upcoming Header Changes - Preparing Themes and Plugins.
    당신의 경우, glimmer header mode 설정을 auto 또는 enabled로 해야 합니다. 그런 다음 플러그인 아웃렛을 사용하여 콘텐츠를 교체할 수 있습니다:

    api.renderInOutlet("home-logo-contents", <template>
  <HomeLogoContents
    @logoSmallUrl={{container.dcsHeaderLogo._smallLogoUrl}}
    @logoUrl={{container.dcsHeaderLogo._logoUrl}}
    @minimized={{@outletArgs.minimized}}
    @mobileLogoUrl={{container.dcsHeaderLogo._mobileLogoUrl}}
    @showMobileLogo={{@outletArgs.showMobileLogo}}
    @title={{@outletArgs.title}}
  />
</template>);

    참고: glimmer <template> 문법을 사용하려면 파일 확장자를 .gjs로 변경해야 합니다.
    또한 아래 방법으로 사용할 수도 있습니다:

     api.registerValueTransformer("home-logo-image-url", (transformer) => {
    let url = transformer.value;
    if (transformer.context.name === 'logo') {
      url = container.dcsHeaderLogo._logoUrl;
    } else if (transformer.context.name === 'logo_small') {
      url = container.dcsHeaderLogo._smallLogoUrl;
    } else if (transformer.context.name === 'logo_mobile') {
      url = container.dcsHeaderLogo._mobileLogoUrl;
    }
    return url;
  });

    URL을 변경하려면:

    api.registerValueTransformer("home-logo-href", () => container.dcsHeaderLogo._href);

    참고: setLogo에서 다시 렌더링하는 코드는 glimmer 컴포넌트에서 작동하지 않을 것으로 생각됩니다.

    테스트 후 참고: 그러나 두 솔루션 모두 JSON에서 로고를 가져올 수 있기 전에 헤더가 렌더링되므로 작동하지 않습니다. 이에 대한 즉각적인 해결책은 없습니다. 더 나은 방법이 있는지 확실하지 않습니다: JSON 로딩을 서비스로 이동하고 결과를 추적하는 것이 좋겠습니다. 그런 다음 위 플러그인 아웃렛을 glimmer 컴포넌트와 함께 사용하세요. 이렇게 하면 추적 변수에 기반하여 컴포넌트에서 자동으로 업데이트를 트리거할 수 있습니다.

이렇게 하면 어딘가에서는 작동하는 것 같습니다. 여전히 컴포저(composer)처럼 작동하지 않는 부분이 있습니다. 이 부분에 대해 깊이 살펴보지는 않았습니다. 최소한 더 이상 차단 오류(blocking error)는 발생하지 않습니다. :slightly_smiling_face:

도움이 되기를 바랍니다.