3.11 Templates --Rendering with Helpers

Ember提供几个辅助器允许你使用不同的方法渲染模板(render templates)。

一、The {{partial}} Helper

{{partial}}以模板呈现作为参数,并呈现模板。

{{partial}}不改变上下文或作用域。它简单的将给定的模板放置到当前作用于中。

app/templates/author.hbs

Written by {{author.firstName}} {{author.lastName}}

app/templates/post.hbs

<h1>{{title}}</h1>
<div>{{body}}</div>
{{partial "author"}}

输出：

<div>
  <h1>Why You Should Use Ember.js</h1>
  <div>Because it's awesome!</div>
  Written by Yehuda Katz
</div>

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

<h1>{{title}}</h1>
<div>{{body}}</div>
{{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