首先应该了解emberjs默认的命名规范。
我们会定义一个application ,然后通过路由器Router.map()会默认创建一个路由this.route('index',{path:'/'})(默认是缺省的)。
window.Freemodel = Ember.Application.create({
LOG_TRANSITIONS: true,
ready: function() {},
});
Freemodel.Router.map(function() {
});
Freemodel.IndexRoute = Ember.Route.extend({
});
这时我们的HTML模板是默认会找到index路由,所以页面渲染的就是我们的index模板。以下四种写法都是指向index路由
<script type="text/x-handlebars" data-template-name="">
{outlet}
</script>
<script type="text/x-handlebars" data-template-name="index">
{outlet}
</script>
<script type="text/x-handlebars" data-template-name="application">
{outlet}
</script>
<script type="text/x-handlebars" data-template-name="application/index">
{outlet}
</script>
当我们希望在Index模板中添加子模板时或渲染其他模板时,需要在Index路由中添加renderTemplate函数,来告诉Index模板中outlet中显示具体某个模板。同样添加子路由时,也可以在子路由中添加renderTemplate,告诉模板应该渲染哪个部分。而不仅仅是默认的按照命名规范所定义的模板,从而达到模板的复用。
Freemodel.IndexRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('first');
});
Freemodel.SecondRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('first');
});
<script type="text/x-handlebars" data-template-name="">
{outlet}
</script>
<script type="text/x-handlebars" data-template-name="first">
Hello world !!!
</script>
<script type="text/x-handlebars" data-template-name="second">
Hello world !!!
Hello world !!!
{outlet}
</script>
此时,页面应该只显示一次Hello world !!! 因为我们并未在页面渲染过second模板,Index模板仅会展示first模板中的内容。下面我们希望在Index模板中同时渲染两个模板。这时页面会出现四次Hello world !!! 一次是first模板中的,还有三次是first模板+second模板中的,因为second模板中又重新渲染了first模板。
Freemodel.IndexRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('first',{
outlet:'first'
});
this.render('second',{ //模板名称
view: 'second', //视图名称
outlet: 'second', //插口名称
into: 'application', //父模板名称
controller: this.controllerFor('second') //控制器
});
});
Freemodel.SecondRoute = Ember.Route.extend({
renderTemplate: function() {
this.render('first');
});
<script type="text/x-handlebars" data-template-name="">
{outlet first}
{outlet second}
</script>
上述为使用emberjs在同一个页面使用多个模板同时进行渲染。