테마 컴포넌트를 만들 때 다양한 항목에 대한 import를 찾아 헤매는 경우가 많아서, 이들을 정리해서 여기에 올렸습니다.
Ember 관련
| 이름 | Import | 사용법 |
|---|---|---|
| Component | import Component from "@glimmer/component"; |
export default class MyComponentClass extends Component {} |
| Action 데코레이터 | import { action } from "@ember/object"; |
@action |
| Tracked 데코레이터 | import { tracked } from "@glimmer/tracking"; |
@tracked myTrackedVar |
| Service 데코레이터 | import { service } from "@ember/service"; |
@service modal |
| (Glimmer 템플릿) on | import { on } from "@ember/modifier"; |
<p {{on "click" this.someAction}}>Click me!</p>[1] |
Discourse 관련
| 이름 | Import | 사용법 |
|---|---|---|
| apiInitializer | import { apiInitializer } from "discourse/lib/api"; |
export default apiInitializer((api) => {}) |
| withPluginApi | import { withPluginApi } from "discourse/lib/plugin-api"; |
withPluginApi((api) => {})[2][3] |
| ConditionalLoadingSpinner | import ConditionalLoadingSpinner from "discourse/components/conditional-loading-spinner"; |
<ConditionalLoadingSpinner @condition={{this.loading}} /> |
| DButton | import DButton from "discourse/ui-kit/d-button"; |
<DButton @icon="..." @action={{this.someAction}} /> |
| ajax | import { ajax } from "discourse/lib/ajax"; |
ajax("/path/here")[4] |
| i18n | import { i18n } from "discourse-i18n"; |
{{i18n "locale_key"}}[5] |
| (Glimmer 템플릿) Equals, not equals, greater than, greater than or equals, less than, less than or equals, or, not, and, has, includes | import { eq, and, ... } from "truth-helpers"; |
{{#if (eq this.something this.something2)}}[6] |
tracked 변수를 ConditionalLoadingSpinner의 조건으로 사용하거나, DButton의 액션으로 사용하는 등 조합해서 사용하는 경우도 볼 수 있습니다.
도움이 되셨으면 좋겠습니다!
전문가는 아니므로, 부정확한 부분이 보이면 수정해 주시거나 지적해 주시면 감사하겠습니다 
.
input,mousedown,focusin등의 이벤트도 사용할 수 있습니다 ↩︎discourse/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js at 99ace1be120b928f6c694d0118959d745cc4bdbe · discourse/discourse · GitHub 참조 ↩︎
apiInitializer사용을 권장하는 것 같습니다. 이건 구버전인 것 같네요? ↩︎fetch()와 유사하게 동작합니다.async함수 안에서await키워드와 함께 사용하세요. ↩︎코어 저장소에서 로케일을 가져오는 경우, 예: user.summary.stats ↩︎
and,or같은 경우 2개 이상의 인자를 가질 수 있습니다 ↩︎
