如何將模型傳遞給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>