流星顯示和隱藏模板

我試圖找到流星顯示和隱藏模板的方式。例如，如果主頁按鈕被點擊，則顯示主頁模板並隱藏所有其他頁面。我知道這是可能的會話變量或依賴關係，但無法正常工作。流星顯示和隱藏模板

2014-09-02 james

可以通過使用Session變量來實現，但您可能希望使用iron router package來代替。

以下是使用Session可變的解決方案：

<body> 
    {{#if isPage 'home'}} 
     {{> home}} 
    {{/if}} 
    {{#if isPage 'about'}} 
     {{> about}} 
    {{/if}} 
    <ul> 
     <li><button class="clickChangesPage" data-page='home'>Home</button></li> 
     <li><button class="clickChangesPage" data-page='about'>About</button></li> 
    </ul> 
</body> 

<template name="home"> 
    <p>Home!</p> 
</template> 

<template name="about"> 
    <p>About!</p> 
</template>

if(Meteor.isClient){ 

    Session.setDefault('page', 'home'); 

    UI.body.helpers({ 
     isPage: function(page){ 
      return Session.equals('page', page) 
     } 
    }) 

    UI.body.events({ 
     'click .clickChangesPage': function(event, template){ 
      Session.set('page', event.currentTarget.getAttribute('data-page')) 
     } 
    }) 

}

更新2個火星2016

作爲評論所指出的，使用Template.dynamic是更好的解決方案。下面是使用一個代碼：

<body> 
    {{> Template.dynamic template=currentPage}} 
    <ul> 
     <li><button class="clickChangesPage" data-page='home'>Home</button></li> 
     <li><button class="clickChangesPage" data-page='about'>About</button></li> 
    </ul> 
</body> 

<template name="home"> 
    <p>Home!</p> 
</template> 

<template name="about"> 
    <p>About!</p> 
</template>

if(Meteor.isClient){ 

    Session.setDefault('page', 'home'); 

    Template.body.helpers({ 
     currentPage: function(page){ 
      return Session.get('page') 
     } 
    }) 

    Template.body.events({ 
     'click .clickChangesPage': function(event, template){ 
      Session.set('page', event.currentTarget.getAttribute('data-page')) 
     } 
    }) 

}

來源

2014-09-02 07:38:42

謝謝，我不知道這是可能通過鐵的路由器，所以將着眼於這一點。你能給出任何使用會話變量做它的例子嗎？ – james 2014-09-02 08:06:06

@james，看我更新的答案。 – 2014-09-02 08:26:56

令人驚歎！感謝您的快速響應，我希望這有助於其他人與流星一起出發。 Stackoverflow再次保存一天:-) – james 2014-09-02 10:49:34

流星顯示和隱藏模板

回答

相關問題