如何在路由器v2中为路由呈现多个模板

Question

我的索引模板有两个出口,一个用于标题,另一个用于内容.内容中呈现的模板会根据正在查看的内容而更改.

在旧路由器中,这可以通过调用connectOutlet拥有该模板的不同控制器来完成.我无法弄清楚如何在新的路由器中做同样的事情.

有什么建议？

Answer 1

通过我的研究,我得出了这样的结论:假设您有一个像这样定义的路由器:

App.Router.map(function(match) {
  match('/').to('index');
});

ApplicationTemplate:

<script type="text/x-handlebars">
{{outlet header}}
{{outlet}}
</script>

IndexTemplate:

<script type="text/x-handlebars" data-template-name="index">
{{outlet dashboard}}
{{outlet spaces}}
</script>

现在,我们想要的是当用户进入索引路由器时,页面应该:

• 将索引渲染到主出口并将标题插入应用程序模板的标题出口.
• 渲染仪表板,将模板空间转换为索引模板.

为此,我们在indexRoute中编写以下代码

App.IndexRoute = Em.Route.extend({
    renderTemplate: function(controller, model){
        //Render header into header outlet
        this.render('header',{
            outlet:'header'
        });
        //Render index into main outlet. If you comment out 
        //this line, the code below fails
        this.render('index');

        //by using into, we can render into the index template
        //Note: The controller is optional.if not specified,
        //ember picks up controller for the given template.
        this.render('dashboard',{
            outlet:'dashboard',
            into:'index',
            controller:this.controllerFor('somethingElse', App.TestModel.find())
        });
        //controller is SpacesController
        this.render('spaces',{
            outlet:'spaces',
            into:'index'
        });
    }
});

Answer 2

您可以使用路由器中的renderTemplates函数将多个视图呈现给名称出口:

renderTemplates:function () {
   this.render('todos_list', {
       into:'todos', //template name
       outlet: 'todos', //named outlet
       controller: 'listController' //controller you want to use
   });
   this.render('todos_test', {
       into:'todos',
       outlet: 'test',
       controller: 'testController'
   });
},

setupControllers:function (controller, model) {
   this.controllerFor('list').set('content', listmodel.find());
   this.controllerFor('test').set('content', testmodel.find());
}

setupControllerControllerFor函数允许您在前一个路由器中分配我们设置为"context"的内容.

在您的模板中,您可以像以前一样命名插座:

{{outlet list}}
{{outlet test}}

希望这可以帮助 :)