テーマコンポーネントを作成する際に、さまざまなもののインポートを探し回ることがよくあるので、それらをいくつかまとめてここに置くことにしました。
Ember関連
| 名前 | インポート | 使用法 |
|---|---|---|
| Component | import Component from \"@glimmer/component\"; |
export default class MyComponentClass extends Component {} |
| Action decorator | import { action } from \"@ember/action\"; |
@action |
| Tracked decorator | import { tracked } from \"@glimmer/tracking\"; |
@tracked myTrackedVar |
| Service decorator | import { service } from \"@ember/service\"; |
@service modal |
| (Glimmer template) on | import { on } from \"@ember/modifier\"; |
\u003cp {{on \"click\" this.someAction}}\u003eClick me!\u003c/p\u003e[1] |
Discourse関連
| 名前 | インポート | 使用法 |
|---|---|---|
| apiInitializer | import { apiInitializer } from \"discourse/lib/api\"; |
export default apiInitializer((api) =\u003e {}) |
| withPluginApi | import { withPluginApi } from \"discourse/lib/plugin-api\"; |
withPluginApi((api) =\u003e {})[2][3] |
| ConditionalLoadingSpinner | import ConditionalLoadingSpinner from \"discourse/components/conditional-loading-spinner\"; |
\u003cConditionalLoadingSpinner @condition={{this.loading}} /\u003e |
| DButton | import DButton from \"discourse/components/d-button\"; |
\u003cDButton @icon=\"...\" @action={{this.someAction}} /\u003e |
| ajax | import { ajax } from \"discourse/lib/ajax\"; |
ajax(\"/path/here\")[4] |
| i18n | import { i18n } from \"discourse-i18n\"; |
{{i18n \"locale_key\"}}[5] |
| (Glimmer template) 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] |
これらが組み合わされて使用されているのを見るかもしれません。例えば、ConditionalLoadingSpinner の条件としてトラッキングされた変数を使用したり、DButton のアクションとして使用したりします。
お役に立てば幸いです!
\u003csmall\u003e私はプロではないので、不正確な点を見つけた場合は、修正するか指摘してください。ありがとうございます
。\u003c/small\u003e