Rendering with Helpers

Rendering with Helpers

用助手来渲染

Ember.js provides several helpers that allow you to render other views and templates in different ways.

Ember.js提供了数个助手来协助你以不同的方式来渲染其他视图或模板

The {{partial}} Helper

{{partial}} 助手

{{partial}} takes the template to be rendered as an argument, and renders that template in place.

{{partial}}接收一个模板作为其参数，然后恰当地渲染这个模板

{{partial}} does not change context or scope. It simply drops the given template into place with the current scope.

{{partial}}不改变上下文或作用域。它只是简单地在当前作用域下将指定的模板渲染出来。

<script type="text/x-handlebars" data-template-name='_author'>
  Written by {{author.firstName}} {{author.lastName}}
</script>
<script type="text/x-handlebars" data-template-name='post'>
  <h1>{{title}}</h1>
  <div>{{body}}</div>
  {{partial "author"}}
</script>

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

The partial’s data-template-name must start with an underscore (e.g. data-template-name='_author' or data-template-name='foo/_bar')

Partial的data-template-name必须以下划线开头（例如：data-template-name='_author'或者data-template-name='foo/_bar'）

The {{view}} Helper

{{view}} 助手

This helper works like the partial helper, except instead of providing a template to be rendered within the current template, you provide a view class. The view controls what template is rendered.

此助手和 partial 类似，不同的是你需要提供一个视图类，而不是在当前模板内提供一个待渲染的模板。这个视图类控制哪个模板将被渲染，如下所示：

App.AuthorView = Ember.View.extend({
  // We are setting templateName manually here to the default value
  templateName: "author",
  // A fullName property should probably go on App.Author, 
  // but we're doing it here for the example
  fullName: (function() {
    return this.get("author").get("firstName") + " " + this.get("author").get("lastName");
  }).property("firstName","lastName")
})

<script type="text/x-handlebars" data-template-name='author'>
  Written by {{view.fullName}}
</script>
<script type="text/x-handlebars" data-template-name='post'>
  <h1>{{title}}</h1>
  <div>{{body}}</div>
  {{view App.AuthorView}}
</script>

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

When using {{partial "author"}}:

• No instance of App.AuthorView will be created
• The given template will be rendered

当使用 {{partial "author"}} 时：

• 不会创建 App.AuthorView 的实例
• 会渲染指定模板

When using {{view App.AuthorView}}:

• An instance of App.AuthorView will be created
• It will be rendered here, using the template associated with that view (the default template being “author”)

当使用 {{view App.AuthorView}} 时：

• 会创建 App.AuthorView 的实例
• 会渲染与指定视图相关联的模板(默认的模板是 “author”)

For more information, see Inserting Views in Templates

更多信息，请见在模板中插入视图

The {{render}} Helper

{{render}} 助手

{{render}} takes two parameters:

• The first parameter describes the context to be setup
• The optional second parameter is a model, which will be passed to the controller if provided

{{render}} 需要两个参数：

• 第一个参数描述需要建立的上下文
• 第二个参数是可选参数，它接收一个模型，如果提供了这个参数，就会被传递给控制器。

{{render}} does several things:

• When no model is provided it gets the singleton instance of the corresponding controller
• When a model is provided it gets a unique instance of the corresponding controller
• Renders the named template using this controller
• Sets the model of the corresponding controller

{{render}} 可以完成以下几个功能：

• 如果没有提供model，那么将使用对应controller的单例实例
• 如果提供了model，那么将使用对应controller的一个独立实例
• 用此控制器渲染命名模板
• 设置相应控制器的模型

Modifying the post / author example slightly:

稍微修改一下 post / author 的例子：

<script type="text/x-handlebars" data-template-name='author'>
  Written by {{firstName}} {{lastName}}. 
  Total Posts: {{postCount}}
</script>
<script type="text/x-handlebars" data-template-name='post'>
  <h1>{{title}}</h1>
  <div>{{body}}</div>
  {{render "author" author}}
</script>

App.AuthorController = Ember.ObjectController.extend({
  postCount: function() { 
    return App.Post.countForAuthor(this.get("model"));
  }.property("model","App.Post.@each.author")
})

In this example, render will:

• Get an instance of App.AuthorView if that class exists, otherwise uses a default generated view
• Use the corresponding template (in this case the default of “author”)
• Get (or generate) the singleton instance of AuthorController
• Set the AuthorController’s model to the 2nd argument passed to render, here the author field on the post
• Render the template in place, with the context created in the previous steps.

在此例中，render 助手会：

• 如果 App.AuthorView 存在，获取它的一个实例，否则就使用默认生成的视图
• 使用相应的模板（此处为默认的 “author”）
• 获取（或生成）AuthorController 的单体实例
• 设置 AuthorController的模型为{{render}}助手的第二个参数，此处为 post 里的 author 字段
• 根据前几步创建的上下文，恰当地渲染模板

{{render}} does not require the presence of a matching route.

{{render}} is similar to {{outlet}}. Both tell Ember.js to devote this portion of the page to something.

{{outlet}}: The router determines the route and sets up the appropriate controllers/views/models. {{render}}: You specify (directly and indirectly) the appropriate controllers/views/models.

{{render}} 不需要匹配路由。

{{render}} 与 {{outlet}} 类似。两者均负责通知Ember.js将这一部分页面用来渲染其他模板。

{{outlet}}: 路由器决定路由，并且创建合适的控制器/视图/模型 {{render}}: 你（直接或间接地）指定合适的控制器/视图/模型

Note: {{render}} cannot be called multiple times for the same route when not specifying a model.

注意：当没有指定模型时，同一个路由不能重复的调用{{render}}。

Comparison Table

比较表

General

整体概念性比较

Specific

基于特定实例的比较