codecamp

Ember 模板渲染

路由的另一个重要职责是渲染同名字的模板。

比如下面的路由设置,posts路由渲染模板posts.hbs,路由new渲染模板posts/new.hbs

Router.map(function() {
     this.route('posts', function() {
     this.route('new');
  });
});

每一个模板都会渲染到父模板的{{outlet}}上。比如上面的路由设置模板posts.hbs会渲染到模板application.hbs{{outlet}}上。application.hbs是所有自定义模板的父模板。模板posts/new.hbs会渲染到模板posts.hbs{{outlet}}上。

如果你想渲染到另外一个模板上也是允许的,但是要在路由中重写renderTemplate回调方法。

//  app/routes/posts.js


import Ember from 'ember';


export default Ember.Route.extend({
    //  渲染到favorites模板上
    renderTemplate: function() {
        this.render('favorites');
    }
});

模板的渲染这个知识点比较简单,内容也很少,在前面的Ember.js 入门指南之十四番外篇,路由、模板的执行、渲染顺序已经介绍过相关的内容。


博文完整代码放在Github(博文经过多次修改,博文上的代码与github代码可能又出入,不过影响不大!),如果你觉得博文对你有点用,请在github项目上给我点个star吧。您的肯定对我来说是最大的动力!!

Ember 指定与路由关联的模型
Ember 路由重定向
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }