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 |
3.11 Templates --Rendering with Helpers的更多相关文章
- Professional C# 6 and .NET Core 1.0 - Chapter 41 ASP.NET MVC
What's In This Chapter? Features of ASP.NET MVC 6 Routing Creating Controllers Creating Views Valida ...
- Ember.js学习教程 -- 目录
写在前面的话: 公司的新项目需要用到Ember.js,版本为v1.13.0.由于网上关于Ember的资料非常少,所以只有硬着头皮看官网的Guides,为了加深印象和方便以后查阅就用自己拙劣的英语水平把 ...
- Handlebars.js,Json+ajax+拼html
英文版:http://handlebarsjs.com./ 原文链接:http://www.cnblogs.com/diligenceday/p/4105229.html, http://segmen ...
- Magento架构分析,Magento MVC 设计分析
Magento架构分析,Magento MVC 设计分析 分类:Magento 标签:Magento MVC.Magento架构 669人浏览 Magento 采用类似 JAVA的架构,其扩展与稳定性 ...
- WPF解析Word为图片
偶遇需要解析Word为单张图,此做 http://git.oschina.net/jiailiuyan/OfficeDecoder using System; using System.Collect ...
- Linux第二篇【系统环境、常用命令、SSH连接、安装开发环境】
系统环境 我们知道Windows的出色就在于它的图形界面那一块,而Linux对图形界面的支持并不是那么友好-其实我们在Windows下对图形界面进行的操作都是得装换成命令的方式的! 当然了,我们在Ub ...
- DirectX11 With Windows SDK--00 目录
前言 (更新于 2019/4/10) 从第一次接触DirectX 11到现在已经有将近两年的时间了.还记得前年暑假被要求学习DirectX 11,在用龙书的源码配置项目运行环境的时候都花了好几天的时间 ...
- 【转】Beginning Game Programming v2.0
Beginning Game Programming v2.0 Last Updated 8/19/18 Greetings everyone, welcome to the ground up re ...
- Browser Page Parsing Details
Browser Work: 1.输入网址. 2.浏览器查找域名的IP地址. 3. 浏览器给web服务器发送一个HTTP请求 4. 网站服务的永久重定向响应 5. 浏览器跟踪重定向地址 现在,浏 ...
随机推荐
- android学习之--网格视图(GridView)和图像切换器(ImageSwitcher)
GridView用于在界面上按行.列分布显示多个组件.GridView和ListView有共同父类:AbsListView. GridView与ListView的差别在于:ListV ...
- PHP-006
Q:应用程序执行时的路径 "D:\*******\protected\runtime" 是无效的. 请确定它是一个可被 Web server process 写入资料的目录. A: ...
- Burp Suite使用教程
http://www.nxadmin.com/tools/689.html http://tech.idv2.com/2006/08/31/burp-suite/ http://www.securit ...
- /etc/security/limits.conf
ulimit 命令用来限制系统用户对 shell 资源的访问,但只是临时生效,想要永久生效需要配置 /etc/security/limits.conf 文件,语法及常见配置如下: [root@loca ...
- Python 处理输入输出
sys.stdin.read() 用于接收标准输入,也就是让用户通过键盘进行输入sys.stdout.write() 用于打印标准输出,也就是把输入的数据输出到屏幕sys.stderr.write() ...
- Discuz 模板标签说明
Discuz 模板标签说明 Discuz! 的模板采用近似 PHP 表达式的语法,基本都是可识别的HTML,但涉及到变量和动态内容时,基本形式下: <!-{ 代码内容 }-> 逻辑元素包围 ...
- Django学习笔记 创建应用
django中使用应用来分割功能.比如:做一个游戏网站,包含4块不同的功能:游戏新闻.游戏论坛.Blog系统.在线商城.使得结构清晰了,每一个应用实现不同的功能:便于复用:游戏新闻.游戏论坛.Blog ...
- Eclipse+pydev解决中文显示和注释问题的方法大全
Eclipse+pydev解决中文显示和注释问题的方法大全 Eclipse的设置 window->preferences->general->editors->textedit ...
- 17,UC(06)
/* 达内学习 UC day06 2013-10-10 */ 回忆过去: 系统调用 - UNIX操作系统提供的一些列函数皆苦,用于访问内核空间,遵循posix规范 文件操作:open()\rea ...
- bootstrap之
一.字体图标 <button type="button" class="btn btn-primary btn-lg"> <span clas ...