javascript - Ember，如何为 "partial"和 "index"重用相同的 "show"

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 中。

如何解决此问题，以便可以为 index 和 show 重用相同的部分？

Answer 1

这更像是 Ember Components 的情况。 ，据我所知。

让我解释一下，以帮助您开始。

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

• 模板(*.hbs 文件)
• 组件 JS 文件

您可以将部分模板移动到组件中(我们将其命名为图表)，如下所示:

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

_

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

{{chart componentObject=localObject}}

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

_

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