如何在路由器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功能將允許你指定我們設置爲原路由器「語境」。

在模板中，你會像以前一樣的名字網點：

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

希望這有助於:)