Ember提供几个辅助器允许你使用不同的方法渲染模板(render templates)。
一、The { {partial}} Helper
{ {partial}}以呈现的模板作为参数,并在这里呈现模板。
{ {partial}}不改变上下文或作用域。它简单的将给定的模板放置到当前作用域中。
app/templates/author.hbs
Written by { {author.firstName}} { {author.lastName}}
app/templates/post.hbs
{ {title}}
{ {body}}{ {partial "author"}}
输出:
Why You Should Use Ember.js
Because it's awesome!Written by Yehuda Katz
二、The { {render}} Helper
1. { {render}}取两个参数:
- 第一个参数描述设定的上下文。
- 可选的第二个参数是model,如果提供了它将被传递到controller。
2. { {render}做了几件事:
- 当没有提供模型时,它会得到相应controller。
- 当提供一个模型时,它会得到一个唯一的controller。
- 使用controller命名模板。
- 设置相应controller的model。
3. 稍微修改下上面的例子:
app/templates/author.hbs
Written by { {firstName}} { {lastName}}.Total Posts: { {postCount}}
app/templates/post.hbs
{ {title}}
{ {body}}{ {render "author" author}}
app/controllers/author.js
export default Ember.Controller.extend({ postCount: Ember.computed('model.posts.[]', function() { return this.get('model.posts.length'); })})
在例子中,render将会:
- 使用相应的模板(例子中默认为"author")
- 获得或者生成AuthorController的单例
- 设置AuthorController's model为传递给render的第二个参数,这里传递的是author对象。
- 使用上一步中创建的上下文在适当的位置渲染模板。
4.{ {render}}和{ {outlet}}的区别
{ {render}}不要求一个匹配路由的存在。
{ {render}}和{ {outlet}}有一点类似。都告诉Ember放入页面这部分东西。
{ {outlet}}:路由器确定路由,并设置适当的控制器/视图/模型。
{ {render}}:你直接或者间接的指定适当的控制器/视图/模型。
注意:当没有指定model时,对同一个路由来说{ {render}}不能被多次调用。
三、Comparison Table(比较表)
1. 一般的
Helper | Template | Model | Controller |
---|---|---|---|
{ {partial}} | Specified Template | Current Model | Current Controller |
{ {render}} | Template | Specified Model | Specified Controller |
2. 特定的
Helper | Template | Model | Controller |
---|---|---|---|
{ {partial "author"}} | templates/author.hbs | models/post.js | controllers/post.js |
{ {render "author" author}} | templates/author.hbs | models/author.js | controllers/author.js |