javascript - Ember，如何为“索引”和“显示”重用相同的“部分”

Question

这是我的情况的简化版本：

<!-- app/templates/charts/index.hbs -->
{{#each model as |chart|}}
  {{partial "charts/chart"}}
{{/each}}

<!-- app/templates/charts/show.hbs -->
{{partial "charts/chart"}}

<!-- app/templates/charts/-chart.hbs -->  
{{chart.title}}

部分-chart.hbs适用于index模板，但不适用于show，因为show图表在变量model中。

我该如何解决这个问题，以便我可以重用相同的部分 forindex和 for show？

Answer 1

据我所知，这更像是Ember Components的一个案例。

让我解释一下，让你开始。

组件是一些附加了一些结构的可重用代码。这意味着一个组件将具有：

• 模板（*.hbs 文件）
• 一个组件 JS 文件

您可以将部分模板移动到组件中（我们将其命名为chart），如下所示：

1. 将代码原样移动到新的组件模板中。
2. 在你的模板中使用变量/对象，就像你现在可能做的那样
3. 而不是用{{partial "charts/chart"}}do渲染它{{chart componentObject=localObject}}
4. 这会将外部对象（无论是模型还是其他）传递给组件的上下文，如下所示：

_

// context code:
<h1>{{localobject.title}}</h1>

{{chart componentObject=localObject}}

// component code
<p>{{componentObject.author}}</p>

_

您的里程可能会有所不同。请随时评论和/或改进我的答案:-)