javascript - Ember 模板约定

Question

我正在尝试了解 Discourse 中的 EmberJS 模板约定。 这是来自 app/assets/javascripts/discourse/templates/discovery/categories.hbs

的片段

{{#discovery-categories refresh="refresh"}}
  {{component controller.categoryPageStyle
              categories=model.categories
              latestTopicOnly=controller.latestTopicOnly
              topics=model.topics}}
  {{!-- my-template --}}
{{/discovery-categories}}

discovery-categories 和 component 的含义是什么？ 例如，我想插入 my-template 来扩展 categories.hbs，我应该使用什么约定来使用模板创建文件？

Answer 1

1. discovery-categories 是组件的名称 使用组件名称静态调用。

2. 第二行中的“组件”是一个模板助手，它使用通过属性 controller.categoryPageStyle 指定的名称动态加载组件。

3.my-template 是yield block ，您可以在其中获取组件discovery-categories(如果其yield)的上下文。 例如。如果 discovery-categories 有一个属性 foo 你可以写类似

{{#discovery-categories refresh="refresh" foo="Some Text"}}
  {{component controller.categoryPageStyle
              categories=model.categories
              latestTopicOnly=controller.latestTopicOnly
              topics=model.topics}}
  {{foo}}
{{/discovery-categories}}