2015-03-31 31 views
0

無論何時單擊流星j中的按鈕,我都需要知道如何動態更改主體模板。例如,我的應用中總共有3個模板。如何使用Meteor JS中的路由器動態更改主體模板?

  1. 一個模板標題模板
  2. :第二個是側菜單模板
  3. ,另一個是內容模板

只要單擊菜單項,然後只用路由器的封裝,並在不改變內容的模板去新的頁面。所以請建議我該怎麼做?

在此先感謝。

回答

1

這是可以使用路由器的layout和yeild功能。正如在這個awesom教程中所定義的http://www.manuel-schoebel.com/blog/iron-router-tutorial

在流星中,我們只渲染並重新渲染部分dom,而不是全部。作爲一個例子,我們希望有一個佈局指定菜單,頁腳和其中的主要內容是在渲染的區域。

這給這種HTML

<template name="complexLayout"> 
<div class="left"> 
    {{> yield region="menu"}} 
    </div> 


    <div class="main"> 
    {{> yield}} 
    </div> 
    <div class="bottom"> 
    {{> yield region="footer"}} 
    </div> 
</template> 

的在這模板是鐵路由器呈現的三個區域。一個是「Main-Yield」和兩個名爲「menu」和「footer」的「Named-Yields」或「Regions」。如果我們想指定我們想要在哪裏呈現哪個模板,名稱就很重要。我們現在希望Iron-Router使用我們的佈局,並使用名稱'menu'和模板'myFooter'將模板'myMenu'渲染到yield,並將其命名爲'footer'。

this.route('home', { 
    path: '/', 
    layoutTemplate: 'complexLayout', 
    yieldTemplates: { 
    'myMenu': {to: 'menu'}, 
    'myFooter': {to: 'footer'} 
    } 
}); 

利用這一點,所有的路由(或有針對性的)可能具有相同的佈局,只有一些地方改取決於當前頁面上。不要忘記,可以使用Router.configure函數來設置默認值。

Router.configure({ 
    layoutTemplate: 'complexLayout', 
    notFoundTemplate: 'notFound', 
    loadingTemplate: 'loading' 
}); 

這樣做將允許開發人員定義在應用程序的不同狀態下使用的默認佈局。

相關問題