使用 if 在 Meteor.js 的不同页面上有不同的元素答案

【问题标题】：Using if to have different elements on different pages in Meteor.js使用 if 在 Meteor.js 的不同页面上有不同的元素
【发布时间】：2016-02-11 21:26:12
【问题描述】：

我有一个特定的 div 类（着陆），我只想出现在某些路线上。我正在使用一个“主”模板，它有我的页眉和页脚（每个页面的唯一代码之间都包含 >yield）。但是，标题中有一个元素，我只想出现在登录页面上（'/' 路由）。

我正在使用 Iron 路由器。

有没有办法在流星中使用#if 轻松做到这一点？谢谢！

【问题讨论】：

标签： javascript meteor

【解决方案1】：

这是一个通用的路由名称相等测试助手：

Template.registerHelper('routeEquals',function(name){
  return Router.current().route.getName() === name;
});

然后在任何模板中你都可以做（例如）：

{{#if routeEquals '/'}}
  in the / route
{{else}}
  Not in the / route
{{/if}}

【讨论】：

【解决方案2】：

您想在您的标头模板上创建一个帮助程序，以响应式检查当前路由。我有一段时间没有使用 Iron Router，但相信 Router.current().route.getName() 是被动的。请尝试以下操作：

Template.header.helpers({
  onLanding() {
    return Router.current().route.getName() === '<landingRouteName>';
  },
});

<template name="header">
  {{#if onLanding}}
  <div>I should only show on the landing page!</div>
  {{/if}}
</template>

或者，或者，或者（也许是最优的——它会保持模板加载，而不是在你着陆时将其注入 DOM），你可以使用帮助器来应用一个类，比如

<div class="{{#if onLanding}}isVisible{{/if}}>...</div>

【讨论】：

【解决方案3】：

您可以在登陆路线的onBeforeAction 中放置一个会话标志，然后在标题上检查该会话是否有效并显示div

像这样的

this.route("landing", {
    path: "/landing", 
    onBeforeAction: function () {
        Session.set('showDiv', true);  
    }
});

<template name='main'>
   <header>{{#if helper_getShowDivFlag}}<div></div>{{/if}}</header>
</template>

helper_getShowDivFlag: function() {
   return Session.get('showDiv');
}

或者，检查主模板中的路由器名称并显示/隐藏div

<template name='main'>
   <header>{{#if helper_showDivFlag}}<div></div>{{/if}}</header>
</template>

helper_showDivFlag: function() {
    return Router.current().route.getName() == 'landing'
}

或者，如果您不想编写代码，请使用此package 并检查路由器：D

<template name='main'>
       <header>{{#if isActiveRoute 'landing' }}<div></div>{{/if}}</header>
</template>

【讨论】：

【解决方案4】：

您可以使用路由的data 属性来完成此操作。

Router.route('/', {
    name: 'home',
    data: function() {
        return {
            showMySpecialHeaderWidget: true
        };
    }
});

然后您可以在模板中访问此数据属性。

<template name="main">
    <header>
        {{#if showMySpecialHeaderWidget}}
            <div>My special header widget</div>
        {{/if}}
    </header>

    {{> yield}}
</template>

使用此方法，如果您更改路线的名称，您无需担心更新模板，并且通过包含此数据属性可以轻松地在多条路线上显示您的小部件。

【讨论】：