Ember，如何为 "index" 和 "show" 重复使用相同的 "partial"

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，图表包含在变量 [=19= 中].

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

Answer 1

据我所知，Ember Components更是如此。

让我稍微解释一下，让您入门。

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

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

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

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

_

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

{{chart componentObject=localObject}}

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

_

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

Ember，如何为 "index" 和 "show" 重复使用相同的 "partial"

Ember, how to reuse same "partial" for "index" and for "show"

javascript

partials

ember.js

htmlbars