Discourse에 Ember 컴포넌트 추가

문서 개발자 가이드
, ,
1

이전 튜토리얼에서는 요청에 응답하기 위해 Discourse의 서버 측과 클라이언트 측 설정 방법을 보여드렸습니다.

이제 Ember 컴포넌트 문서를 읽어보시는 것을 권장합니다: Introducing Components - Components - Ember Guides

컴포넌트를 작성하기 전에, 공유 컴포넌트, 헬퍼, 수정자(modifiers)가 포함된 UI 키트를 확인해 보세요. 대부분의 일반 컨트롤은 이미 그곳에 존재합니다.

기존 튜토리얼

이 튜토리얼에서는 서드파티 JavaScript를 래핑하는 방법으로 새로운 Ember 컴포넌트를 만드는 과정을 보여드리겠습니다. 이는 제가 이전에 만든 YouTube 영상과 유사할 것이며, 유용한 정보를 얻을 수 있을 것입니다. 다만 이번에는 Discourse에 특화되어 있으며, 프로젝트에서 파일을 배치하는 방식을 다룹니다.

왜 컴포넌트를 사용해야 하나요?

Handlebars는 꽤 단순하고 매력적인 언어입니다. 동적 부분이 포함된 일반 HTML이라고 생각하면 됩니다. 배우기 쉽고 생산성에 도움이 되지만, 코드 재사용 측면에서는 그렇지 않습니다. Discourse와 같은 대규모 애플리케이션을 개발하다 보면 동일한 요소를 반복적으로 재사용하고 싶어질 것입니다.

컴포넌트는 Ember가 이 문제를 해결하기 위한 방법입니다. 스낵을 더 아름답게 표시하는 컴포넌트를 만들어 보겠습니다.

새 컴포넌트 만들기

컴포넌트 이름에는 대시(-)가 포함되어야 합니다. 이 컴포넌트의 이름은 fancy-snack으로 정하겠습니다. 템플릿을 만들어 보겠습니다:

app/assets/javascripts/admin/templates/components/fancy-snack.hbs

<div class="fancy-snack-title">
  <h1>{{snack.name}}</h1>
</div>

<div class="fancy-snack-description">
  <p>{{snack.description}}</p>
</div>

이제 이 컴포넌트를 사용하려면 기존 admin/snack 템플릿을 다음 내용으로 대체합니다:

app/assets/javascripts/admin/templates/snack.hbs

{{fancy-snack snack=model}}

이제 필요한 모델만 전달하면 다른 어떤 템플릿에서도 fancy-snack 컴포넌트를 재사용할 수 있습니다.

사용자 정의 JavaScript 코드 추가

재사용성 외에도 Ember의 컴포넌트는 사용자 정의 JavaScript, jQuery 및 기타 외부 코드를 안전하게 추가하는 데 유용합니다. 컴포넌트가 페이지에 삽입되는 시점과 제거되는 시점을 제어할 수 있습니다. 이를 위해 일부 코드가 포함된 Ember.Component를 정의합니다:

app/assets/javascripts/admin/components/fancy-snack.js

export default Ember.Component.extend({
  didInsertElement() {
    this._super();
    this.$().animate({ backgroundColor: "yellow" }, 2000);
  },

  willDestroyElement() {
    this._super();
    this.$().stop();
  },
});

위 코드를 추가하고 페이지를 새로고침하면, 스낵에 노란색 배경이 천천히 페이드되는 애니메이션이 적용되는 것을 볼 수 있습니다.

여기서 일어나는 일을 설명해 보겠습니다:

  1. 컴포넌트가 페이지에 렌더링되면 didInsertElement가 호출됩니다.

  2. didInsertElement(및 willDestroyElement)의 첫 번째 줄인 this._super()는 Ember.Component를 서브클래싱하고 있기 때문에 필요합니다.

  3. 애니메이션은 jQuery의 animate 함수를 사용하여 수행됩니다.

  4. 마지막으로, willDestroyElement 훅에서 애니메이션이 취소됩니다. 이 훅은 컴포넌트가 페이지에서 제거될 때 호출됩니다.

willDestroyElement에 왜 신경 써야 하는지 궁금하실 수 있습니다. 그 이유는 Discourse와 같은 긴 수명의 JavaScript 애플리케이션에서는 메모리 누출이나 불필요한 프로세스가 계속 실행되는 것을 방지하기 위해 정리 작업이 중요하기 때문입니다. 이 경우 애니메이션을 중지함으로써, 컴포넌트가 더 이상 페이지에 표시되지 않으므로 jQuery 타이머가 더 이상 발화할 필요가 없음을 알립니다.

다음 단계

이 시리즈의 마지막 튜토리얼에서는 자동화 테스트를 다룹니다.

이 문서는 버전 관리됩니다 - github에서 변경 사항을 제안해 주세요.

18개의 좋아요
Plugin routing problems
Write acceptance tests and component tests for Ember code in Discourse
Introduction to Discourse Development
2

Hi, how do i extend a discourse component thru a plugin? Can you give me some points. Thanks

1개의 좋아요
3

Generally we prefer you don’t extend Discourse plugins, and you stick to plugin outlets or using the widget decoration API to add stuff.

But if you must, you can create an initializer and use Ember’s extend code. Here’s an example that extends an Ember object.

4개의 좋아요
4

Tried with initializer but didnt worked. What i actually want to do is to add 2 more classNames and some actions:

import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeComponentTopicList(api) {
  // extend component from jsapp/components/topic-list.js.es6
  const TopicList = api.container.lookupFactory('component:topic-list');

  TopicList.extend({
    classNames: ['topic-list', 'round', 'table'],
    actions: {
        clickMe: function() {
            console.log('click');
        }
    }
  });
};

export default {
  name: "extend-for-component-topic-list",

  initialize() {
    withPluginApi('0.1', initializeComponentTopicList);
  }
};

And by “didnt worked”, i mean that topic list completly disappeared from page.
Thank you

5

Were there any logs in the console?

6

Nope, no logs at all. However i managed to fix it this way. I hope it will help someone.

import { default as TopicList } from 'discourse/components/topic-list';
import { withPluginApi } from 'discourse/lib/plugin-api';

function initializeComponentTopicList(api) {
  TopicList.reopen({
    classNames: ['topic-list', 'round', 'table'],
  });
};

export default {
  name: "extend-for-component-topic-list",

  initialize() {
    withPluginApi('0.1', initializeComponentTopicList);
  }
};
3개의 좋아요
7

I just ran into the same problem. Add the following as a css/html customisation and observe empty user cards:

<script type="text/discourse-plugin" version="0.5">
    api.container.lookupFactory('component:user-card-contents')
</script>
2개의 좋아요
13

여기에 업데이트된 문서를 볼 수 있으면 좋겠습니다. glimmer component 문서로 연결할 수 있을 것입니다.

3개의 좋아요