3

I'm trying to build my app's navigation dynamically based on model data.

In my application template, I'm including a view for the navigation:

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

Here's App.NavView:

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

And the nav template:

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

As you can see, I want to loop over contentTypes and display the name of each. Getting these Ember Data models is simple:

App.ContentType.find()

But where do I put this call so that my NavView/nav template has access to the array of models? Should NavView make the call? Or do I make them available to the application template? How?

Thanks for your help!

4

2 回答 2

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

于 2013-06-24T16:33:09.610 回答
0

{{#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>
于 2013-10-22T04:08:52.030 回答