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

Using if to have different elements on different pages in Meteor.js

本文关键字：元素 js 使用 if Meteor      更新时间：2023-09-26

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

我正在使用铁路由器。

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

下面是

一个通用路由名称相等性测试帮助程序：

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

然后在任何模板中，您可以执行（例如）：

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

您希望在标头模板上创建一个帮助程序，用于响应性地检查当前路由。我已经有一段时间没有使用铁路由器了，但相信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>
您可以在

着陆路线的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'
}

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

<template name='main'>
       <header>{{#if isActiveRoute 'landing' }}<div></div>{{/if}}</header>
</template>
您可以使用

路由的 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>

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

相关文章：