Emberjs 在一个模板中使用多个outlet

         首先应该了解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在同一个页面使用多个模板同时进行渲染。