[英]How to pass models to Ember.js view / application template?
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: 在我的
application
模板中,我包含了一个导航视图:
<div class="container">
<h1>My App</h1>
{{view App.NavView}}
</div>
Here's App.NavView
: 这是
App.NavView
:
App.NavView = Ember.View.extend({
templateName: 'nav'
});
And the nav
template: nav
模板:
<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. 如您所见,我想循环遍历
contentTypes
并显示每个类型的name
。 Getting these Ember Data models is simple: 获得这些Ember Data模型很简单:
App.ContentType.find()
But where do I put this call so that my NavView
/ nav
template has access to the array of models? 但是我在哪里进行此调用以便我的
NavView
/ nav
模板可以访问模型数组? Should NavView
make the call? NavView
应该拨打电话吗? Or do I make them available to the application template? 或者我可以将它们提供给应用程序模板吗? How?
怎么样?
Thanks for your help! 谢谢你的帮助!
You can do this using the {{render}}
helper . 您可以使用
{{render}}
帮助程序执行此操作。 You can either use defaults that the corresponding controller would provide or pass in a model along with the context. 您可以使用相应控制器提供的默认值,也可以将模型与上下文一起传递。
{{render}}
is similar to {{outlet}}
but you provide the context. {{render}}
与{{outlet}}
类似,但您提供了上下文。
The markup changes to, 标记更改为,
<div class="container">
<h1>My App</h1>
{{render 'contentTypes'}}
</div>
And I added a corresponding contentTypes template 我添加了相应的contentTypes模板
<script type='text/x-handlebars' data-template-name='contentTypes'>
<ul class="nav">
{{#each contentTypes}}
<li><a href="#">{{name}}</a></li>
{{/each}}
</ul>
</script>
Here's a Jsbin example with the contentTypes hardcoded on a ContentTypesController
. 这是一个Jsbin示例 ,其中contentTypes在
ContentTypesController
上进行了硬编码。 Your implementation would have contentTypes coming via the model. 您的实现将通过模型提供contentTypes。
You can pass the context to the rendered view into a target outlet with the {{#link-to}}
helper in your {{#each}}
block, like so: 您可以使用
{{#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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.