主题组件/插件的常见导入列表 (JS)

我发现在制作主题组件时,我通常需要到处查找各种导入,所以我决定将它们整理并放在这里。

Ember 相关

名称 导入 用法
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 相关

名称 导入 用法
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/components/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 模板) 等于、不等于、大于、大于或等于、小于、小于或等于、或、非、与、有、包含 import { eq, and, ... } from "truth-helpers"; {{#if (eq this.something this.something2)}}[6]

您可能会看到它们组合使用,例如将跟踪变量作为 ConditionalLoadingSpinner 的条件,或将操作用于 DButton 等。

希望这对您有帮助!

我不是专家,所以如果您发现任何不准确之处,请帮助更正或提出,谢谢 :slightly_smiling_face:


  1. 您也可以使用 inputmousedownfocusin 等事件 ↩︎

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

  3. 我认为推荐使用 apiInitializer;我认为这是旧版本? ↩︎

  4. 其工作方式类似于 fetch()。将其放入一个 async 函数中,并使用 await 关键字。 ↩︎

  5. 如果您从核心仓库获取区域设置,例如 user.summary.stats ↩︎

  6. andor 这样的可以有多个参数 ↩︎

9 个赞

哈哈,这太棒了!我也有同样的问题,VS Code 中的 AI/自动填充功能经常会“幻觉”出一个路径 :wink:

1 个赞