2014-09-02 2 views
2

Я пытаюсь найти метеорный способ показать и скрыть шаблоны. Например, если нажата кнопка «Дом», отображается домашний шаблон и все остальные скрыты. Я понимаю, что это возможно с помощью переменных сеанса или зависимостей, но не может работать.Meteor показать и скрыть шаблоны

ответ

8

Этого можно достичь с помощью переменной 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')) 
     } 
    }) 

} 

Update 2 Mars 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')) 
     } 
    }) 

} 
+0

Спасибо Я не знаю, что это было возможно через железный маршрутизатор так будет смотреть на это. Можете ли вы привести примеры использования переменных сеанса? – james

+1

@james, см. Мой обновленный ответ. –

+0

Удивительно! Спасибо за быстрый ответ, и я надеюсь, что это поможет другим, кто отправляется с метеоритом. Stackoverflow сохранит этот день снова :-) – james

Смежные вопросы