如何編寫鐵路路由器嵌套模板？

1）mainLayout.html - >必須由所有頁面使用的總體佈局。（如網頁標題，導航欄，頁腳）

Router.configure({ 
    layoutTemplate: 'mainLayout' 
}) 

<template name="mainLayout"> 
    {{> header}} 
    <div class="container-fluid"> 
    {{> yield}} 
    </div> 
</template>

2）specialLayout.html - 這是繼承主的layout.html但額外的模板（如側/標籤菜單）

我應該如何定義>自定義佈局specialLayout？請注意，specialLayout應具有在mainLayout中定義的標題，導航欄和頁腳。

如果我有路線X想要使用specialLayout，我該怎麼寫呢？

來源

2014-09-19 Pahlevi Fikri Auliya

我不知道在這個時刻任何簡單的方法，但大多數事情可以由幾個較小優雅的方式來實現：

您的公用部分複製到不同的模板，並在這兩種佈局使用它們，即：

<template name="mainLayout"> 
    {{> navbar}} 
    <div> 
    {{> content}} 
    </div> 
    {{> footer}} 
</template> 

<template name="specialLayout"> 
    {{> navbar}} 
    <div> 
    {{> content}} 
    {{> sidebar}} 
    </div> 
    {{> footer}} 
</template>

讓您的特殊部分主要佈局，而不是單獨的一個選項：

<template name="mainLayout"> 
    ... 
    <div> 
    {{#if layout.renderSidebar}} 
     <div class="col-2">> 
     {{> yield 'sidebar'}} 
     </div> 
    {{/if}} 

    <div class="{{#if layout.renderSidebar}} col-10 {{else}} col-12 {{/if}}"> 
     {{> yield}} 
    </div> 
    </div> 
    ... 
</template>

然後在適當的路線使得能夠在側邊欄data：

this.map('pathName', { 
    ... 
    data: function() { 
    return { 
     layout: {renderSidebar: true}, 
     ... 
    }; 
    }, 
});

來源

2014-09-19 05:02:07

如何編寫鐵路路由器嵌套模板？

回答

相關問題