在创建 Theme 组件时,我通常需要四处翻找各种依赖的导入语句,所以我决定把它们整理汇总,放在这里。
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}}>点击我!</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/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 模板) 等于、不等于、大于、大于等于、小于、小于等于、或、非、与、拥有、包含 | import { eq, and, ... } from "truth-helpers"; |
{{#if (eq this.something this.something2)}}[6] |
你可能会看到它们被组合使用,例如将 tracked 变量用作 ConditionalLoadingSpinner 的条件,或者将 action 用于 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这样的助手可以接受两个以上的参数 ↩︎