Question

我正在尝试找到显示和隐藏模板的流星方式。例如，如果单击主页按钮，则显示主页模板并隐藏所有其他模板。我理解这可以使用会话变量或依赖项，但无法正常工作。

Answer 1

可以使用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 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'))
        }
    })

}

流星秀和隐藏模板

1 个答案: