如何在 Router v2 中为路由渲染多个模板 [英] How to render multiple templates for a route in Router v2

问题描述

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

my index template has two outlets, one for header, another for content. the template rendered in the content changes depending on the content being viewed.

在旧路由器中，这可以通过在拥有该模板的不同控制器上调用 connectOutlet 来完成.我不知道如何在新路由器中做同样的事情.

In the old router, this could be done by calling connectOutlet on different controllers who owned that template. I can't figure out how to do the same in the new router.

有什么建议吗?

推荐答案

经过我的研究，我想到了这个:假设你有一个这样定义的路由器:

With my research, I came to this: Say you have a router defined like this:

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

应用模板:

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

索引模板:

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

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

Now, What we want is that when user goes to the index router, the page should:

• 将索引渲染到主出口，将头渲染到应用模板的头出口.
• 将仪表板、空间模板渲染为索引模板.

为了实现这一点，我们在 indexRoute 中编写了以下代码

To achieve this, we write the following code in 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'
        });
    }
});

这篇关于如何在 Router v2 中为路由渲染多个模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！