ember.js - 如何在 Router v2 中为路由呈现多个模板

Question

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

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

有什么建议么？

Answer 1

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

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>

现在，我们想要的是当用户访问索引路由器时，页面应该：

• 将索引渲染到应用程序模板的主出口和标题出口。
• 将仪表板、空间模板渲染为索引模板。

为此，我们在 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 函数将允许您分配我们在前一个路由器中设置为“上下文”的内容。

在您的模板中，您可以像以前一样命名网点：

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

希望这可以帮助 ：）