如何將模型傳遞給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。獲取這些灰燼數據模型很簡單：

App.ContentType.find() 

但是，在我把這個電話讓我NavView/nav模板訪問模型的陣列？ NavView應該打電話嗎？還是讓它們可用於應用程序模板？怎麼樣？

感謝您的幫助！

Answer 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> 

這裏是硬編碼與在ContentTypesController的CONTENTTYPES一個Jsbin example。您的實現將通過模型傳入contentType。

Answer 2

你可以通過上下文來渲染視圖到目標插座與{{#link-to}}助手在你的{{#each}}塊，像這樣：

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