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

【问题标题】：How to pass models to Ember.js view / application template?如何将模型传递给 Ember.js 视图/应用程序模板？
【发布时间】：2013-06-24 15:05:57
【问题描述】：

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

在我的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 应该打电话吗？或者我是否让它们可用于应用程序模板？怎么样？

感谢您的帮助！

【问题讨论】：

标签： javascript ember.js ember-data

【解决方案1】：

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

{{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 example，其 contentTypes 硬编码在 ContentTypesController 上。您的实现将通过模型获得 contentTypes。

【讨论】：

【解决方案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>

【讨论】：