Häufige Liste von Importen für Theme-Komponenten/Plugins (JS)

Community-Wiki Entwickler
1

Ich stelle normalerweise fest, dass ich nach Importen für verschiedene Dinge suche, wenn ich eine Theme-Komponente erstelle. Daher habe ich beschlossen, eine Reihe davon zusammenzustellen und hier zu platzieren.

Ember-bezogen

Name Import Verwendung
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-Vorlage) on import { on } from \"@ember/modifier\"; \u003cp {{on \"click\" this.someAction}}\u003eKlick mich!\u003c/p\u003e[1]

Discourse-bezogen

Name Import Verwendung
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-Vorlage) 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]

Sie könnten sehen, wie sie kombiniert werden, wie z. B. verfolgte Variablen als Bedingung für ConditionalLoadingSpinner oder Aktionen für DButton usw.

Ich hoffe, das hilft!

\u003csmall\u003eIch bin kein Profi, also wenn Sie Ungenauigkeiten bemerken, helfen Sie bitte, sie zu korrigieren oder bringen Sie sie zur Sprache, danke :slightly_smiling_face:.\u003c/small\u003e

  1. Sie können auch Ereignisse wie input, mousedown, focusin usw. verwenden ↩︎

  2. Siehe discourse/app/assets/javascripts/discourse/app/instance-initializers/enable-emoji.js at 99ace1be120b928f6c694d0118959d745cc4bdbe · discourse/discourse · GitHub ↩︎

  3. Ich denke, es wird empfohlen, stattdessen apiInitializer zu verwenden; Ich denke, dies ist die alte Version? ↩︎

  4. Funktioniert ähnlich wie fetch(). Setzen Sie dies in eine async-Funktion, mit einem await-Schlüsselwort. ↩︎

  5. Wenn Sie die Locale aus dem Kern-Repository abrufen, z. B. user.summary.stats ↩︎

  6. Dinge wie and und or können mehr als 2 Argumente haben ↩︎

6 „Gefällt mir“