4.6 Routing -- Rendering A Tempalte
2016-01-25 16:19
288 查看
1. route handler一个重要的任务就是渲染合适的模板到屏幕。
2. 默认的,一个route handler将会呈现模板到最近的父模板。
app/router.js
app/routes/post.js
3. 如果你想呈现一个和route handler相关模板之外的模板,实现renderTemplate hook:
app/routes/post.js
4. 如果你想使用route handler的controller之外不同的controller,传递这个controller的名字到controller选项:
app/routes/post.js
5. Ember允许你命名你的outlets。下面的例子使用了明确的名字指定了两个outelets:
所以如果你想要呈现你的posts到sidebar outlet,使用这样的代码:
app/routes/post.js
6. 上面描述的所有选项可以被一起使用,你想要什么组合都可以:
app/routes/post.js
7. 如果你想要渲染两个不同的模板到一个路由的两个不同的被加载的模板的outlets中:
app/routes/post.js
2. 默认的,一个route handler将会呈现模板到最近的父模板。
app/router.js
Router.map(function() { this.route('post'); });
app/routes/post.js
export default Ember.Route.extend();
3. 如果你想呈现一个和route handler相关模板之外的模板,实现renderTemplate hook:
app/routes/post.js
export default Ember.Route.extend({ renderTemplate() { this.render('favoritePost'); } });
4. 如果你想使用route handler的controller之外不同的controller,传递这个controller的名字到controller选项:
app/routes/post.js
export default Ember.Route.extend({ renderTemplate() { this.render({ controller: 'favoritePost' }); } });
5. Ember允许你命名你的outlets。下面的例子使用了明确的名字指定了两个outelets:
<div class="toolbar">{{outlet "toolbar"}}</div> <div class="sidebar">{{outlet "sidebar"}}</div>
所以如果你想要呈现你的posts到sidebar outlet,使用这样的代码:
app/routes/post.js
export default Ember.Route.extend({ renderTemplate() { this.render({ outlet: 'sidebar' }); } });
6. 上面描述的所有选项可以被一起使用,你想要什么组合都可以:
app/routes/post.js
export default Ember.Route.extend({ renderTemplate() { var controller = this.controllerFor('favoritePost'); // Render the `favoritePost` template into // the outlet `post`, and use the `favoritePost` // controller. this.render('favoritePost', { outlet: 'post', controller: controller }); } });
7. 如果你想要渲染两个不同的模板到一个路由的两个不同的被加载的模板的outlets中:
app/routes/post.js
export default Ember.Route.extend({ renderTemplate() { this.render('favoritePost', { // the template to render into: 'posts', // the template to render into outlet: 'post', // the name of the outlet in that template controller: 'blogPost' // the controller to use for the template }); this.render('comments', { into: 'favoritePost', outlet: 'comment', controller: 'blogPost' }); } });
相关文章推荐
- 模指数运算
- SpringMVC表单标签&处理静态资源
- Delphi XE8 用HttpClient下载文件
- gitinspector+jenkins 开发代码统计CI
- 报错 sal.h(2367): error
- 负载均衡的几种常用方案
- Drupal常用开发工具(一)——Devel模块
- 保证统计信息的准备性
- 腾讯邮箱邮件正文存储型漏洞
- 2016.01.22-2016.01.24回顾
- 热烈祝贺Polymer中文组织站点上线
- Windows OS上安装运行Apache Kafka教程
- [置顶] 每天进步一点点——五分钟理解一致性哈希算法(consistent hashing)
- 项目用druid,长时间不访问应用,再访问又连接不上了数据库了
- Fluentd(td-agent)安装
- Kettle本机编译
- Android点击EditText之外地方隐藏键盘
- Android关于JavaScript与Native方法相互调用
- Java基础学习7_类和对象
- 唱吧中国首推VR直播,剑指VR内容短板