路由器爲頁面的一部分

Question

視圖< - > URL匹配對，是否意味着路由器必須控制整個頁面，並且不能用於控制頁面的子集？我有一種情況，其中Ember用於頁面的一部分，其中最外面的容器視圖被手動添加到DOM元素。解決方法是將整個頁面轉換爲Ember，但也許還有其他方法？感謝任何指針！

Answer 1

您可以指定outlets插入頁面的動態部分。插座呈現當前視圖。在該視圖中，可以有另一個顯示子視圖的出口。

見這個例子：

應用程序模板

<div id="content"> 
    <nav> .. menu part .. </nav> 
    {{outlet}} 
</div> 

這使得你的應用程序的動態部分。當您瀏覽到例如/pages時，您可以顯示其中的頁面列表。當您轉到'/ pages/1'時，{{outlet}}位於pages模板中，該模板呈現page模板。

頁面模板

<ul> 
{{#each page in controller}} 
    <li>{{#linkTo page}}{{page.name}}{{/linkTo}}</li> 
{{/each}} 
</ul> 
{{outlet}} 

頁面模板

<h2>{{name}}</h2> 

頁名頭，現在呈現下面的網頁列表。
這樣您就可以添加儘可能多的動態內容。