如何将模型传递给Ember.js视图/应用程序模板？

Question

我正在尝试根据模型数据动态构建我的应用程序导航。

在我的application模板中，我包含了一个导航视图：

<div class="container">
  <h1>My App</h1>
  {{view App.NavView}}
</div>

这是App.NavView ：

App.NavView = Ember.View.extend({
  templateName: 'nav'
});

nav模板：

<ul class="nav">
  {{#each contentTypes}}
    <li><a href="#">{{name}}</a></li>
  {{/each}}
</ul>

如您所见，我想循环遍历contentTypes并显示每个类型的name 。 获得这些Ember Data模型很简单：

App.ContentType.find()

但是我在哪里进行此调用以便我的NavView / nav模板可以访问模型数组？ NavView应该拨打电话吗？ 或者我可以将它们提供给应用程序模板吗？ 怎么样？

谢谢你的帮助！

Answer 1

您可以使用{{render}} 帮助程序执行此操作。 您可以使用相应控制器提供的默认值，也可以将模型与上下文一起传递。

{{render}}与{{outlet}}类似，但您提供了上下文。

标记更改为，

<div class="container">
<h1>My App</h1>
{{render 'contentTypes'}}
</div> 

我添加了相应的contentTypes模板

<script type='text/x-handlebars' data-template-name='contentTypes'>
<ul class="nav">
  {{#each contentTypes}}
    <li><a href="#">{{name}}</a></li>
  {{/each}}
</ul>
</script>

这是一个Jsbin示例 ，其中contentTypes在ContentTypesController上进行了硬编码。 您的实现将通过模型提供contentTypes。

Answer 2

您可以使用{{#each}}块中的{{#link-to}}帮助程序将上下文传递到呈现的视图到目标插座中，如下所示：

<script type='text/x-handlebars' data-template-name='contentTypes'>
<ul class="nav">
  {{#each contentTypes}}
    <li>{{#link-to "routeName" this}}{{name}}{{/link-to}}</li>
  {{/each}}
</ul>
</script>