发布于 2015-08-18 16:31:06 | 376 次阅读 | 评论: 0 | 来源: 网络整理
Ember.js提供了数个助手来协助你以不同的方式来渲染其他视图或模板
{{partial}} 助手{{partial}}接收一个模板作为其参数，然后恰当地渲染这个模板
{{partial}}不改变上下文或作用域。它只是简单地在当前作用域下将指定的模板渲染出来。
1 2 3 4 5 6 7 8 9 |
<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>
|
1 2 3 4 5 |
<div> <h1>Why You Should Use Ember.JS</h1> <div>Because it's awesome!</div> Written by Yehuda Katz </div> |
Partial的data-template-name必须以下划线开头（例如：data-template-name='_author'或者data-template-name='foo/_bar'）
{{view}} 助手此助手和 partial 类似，不同的是你需要提供一个视图类，而不是在当前模板内提供一个待渲染的模板。这个视图类控制哪个模板将被渲染，如下所示：
1 2 3 4 5 6 7 8 9 10 |
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")
})
|
1 2 3 4 5 6 7 8 9 |
<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>
|
1 2 3 4 5 |
<div> <h1>Why You Should Use Ember.JS</h1> <div>Because it's awesome!</div> Written by Yehuda Katz </div> |
当使用 {{partial "author"}} 时： * 不会创建 App.AuthorView 的实例 * 会渲染指定模板
当使用 {{view App.AuthorView}} 时： * 会创建 App.AuthorView 的实例 * 会渲染与指定视图相关联的模板(默认的模板是 "author")
更多信息，请见在模板中插入视图
{{render}} 助手{{render}} 需要两个参数：
{{render}} 可以完成以下几个功能：
稍微修改一下 post / author 的例子：
1 2 3 4 5 6 7 8 9 10 |
<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>
|
1 2 3 4 5 |
App.AuthorController = Ember.ObjectController.extend({
postCount: function() {
return App.Post.countForAuthor(this.get("model"));
}.property("model","App.Post.@each.author")
})
|
在此例中，render 助手会：
{{render}} 不需要匹配路由。
{{render}} 与 {{outlet}} 类似。两者均负责通知Ember.js将这一部分页面用来渲染其他模板。
{{outlet}}: 路由器决定路由，并且创建合适的控制器/视图/模型 {{render}}: 你（直接或间接地）指定合适的控制器/视图/模型
注意：当没有指定模型时，同一个路由不能重复的调用{{render}}。
| 助手 | 模板 | 模型 | 视图 | 控制器 |
|---|---|---|---|---|
{{partial}} |
指定模板 | 当前模型 | 当前视图 | 当前控制器 |
{{view}} |
视图的模板 | 当前模型 | 指定视图 | 当前控制器 |
{{render}} |
视图的模板 | 指定模型 | 指定视图 | 指定控制器 |
| 助手 | 模板 | 模型 | 视图 | 控制器 |
|---|---|---|---|---|
{{partial "author"}} |
author.hbs |
Post | App.PostView |
App.PostController |
{{view App.AuthorView}} |
author.hbs |
Post | App.AuthorView |
App.PostController |
{{render "author" author}} |
author.hbs |
Author | App.AuthorView |
App.AuthorController |