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}}

希望这会有所帮助：）

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

2 个答案: