2
我試圖找到流星顯示和隱藏模板的方式。例如,如果主頁按鈕被點擊,則顯示主頁模板並隱藏所有其他頁面。我知道這是可能的會話變量或依賴關係,但無法正常工作。流星顯示和隱藏模板
我試圖找到流星顯示和隱藏模板的方式。例如,如果主頁按鈕被點擊,則顯示主頁模板並隱藏所有其他頁面。我知道這是可能的會話變量或依賴關係,但無法正常工作。流星顯示和隱藏模板
可以通過使用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'))
}
})
}
謝謝,我不知道這是可能通過鐵的路由器,所以將着眼於這一點。你能給出任何使用會話變量做它的例子嗎? – james 2014-09-02 08:06:06
@james,看我更新的答案。 – 2014-09-02 08:26:56
令人驚歎!感謝您的快速響應,我希望這有助於其他人與流星一起出發。 Stackoverflow再次保存一天:-) – james 2014-09-02 10:49:34