Javascript 如何以编程方式显示/隐藏Meteor中作为主体模板一部分的按钮？_Javascript_Css_Meteor_Meteor Blaze_Meteor Helper

Javascript 如何以编程方式显示/隐藏Meteor中作为主体模板一部分的按钮？

javascript css meteor

Javascript 如何以编程方式显示/隐藏Meteor中作为主体模板一部分的按钮？,javascript,css,meteor,meteor-blaze,meteor-helper,Javascript,Css,Meteor,Meteor Blaze,Meteor Helper,我正在Meteor应用程序中使用Template.dynamic功能。显示的初始模板是主模板，用户通常希望立即从移动到的任何模板返回该模板。我想通过一个“返回”按钮使返回初始/主要模板的能力变得非常明显首先让我概述一下如何交换模板： Template.mnuScheduler.events({ "click #mniOpenExisting": function () { Session.set('curTemplate', 'scheduleOpenExisting'

我正在Meteor应用程序中使用Template.dynamic功能。显示的初始模板是主模板，用户通常希望立即从移动到的任何模板返回该模板。我想通过一个“返回”按钮使返回初始/主要模板的能力变得非常明显

首先让我概述一下如何交换模板：

  Template.mnuScheduler.events({
    "click #mniOpenExisting": function () {
      Session.set('curTemplate', 'scheduleOpenExisting');
    },

  Template.body.helpers({
    currentTemplate: function () {
      return Session.get('curTemplate');
    }
  });

  <div class="container">
    {{> mnuScheduler}}
    {{> Template.dynamic template=currentTemplate}}

…其中CSS类是：

.hide {
  visibility: hidden;
  display: none;
}

…但这里必须有一种实现干式原理的方法，而不是在每个模板上重复“返回”按钮

起初我想如果我像这样把“后退按钮”放在身体上：

main.html：

<body>

  <div class="container">
    {{> mnuScheduler}}
    {{> Template.dynamic template=currentTemplate}}    
    {{> backButton}}
  </div>

</body>

<template name="backButton">    
    <div>
        <button class="hide" type="button" id="btnGoBack" name="btnGoBack">Go Back</button> 
    </div>
</template>

<body>
  <div class="container">
    {{> mnuScheduler}}
    {{> Template.dynamic template=currentTemplate}}
    {{#unless isChiefTemplate}}
      <button type="button" id="btnDisplayScheduleTemplate" name="btnDisplayScheduleTemplate">Display Schedule</button>
    {{/unless}}
    {{> footer}}
  </div>

</body>

…但是'btnBack'不是'mnuScheduler'模板的一部分，因此'btnBack'在那里无法识别

如果我只将后退按钮放在一个位置（“正文”模板），我可以从另一个模板的事件引用它吗？有没有办法做到这一点：

  Template.mnuScheduler.events({
    "click #mniOpenExisting": function () {
      Session.set('curTemplate', 'scheduleOpenExisting');
      Template.body.$('btnBack').addClass('hide');      
    },

Template.registerHelper('isChiefTemplate', function(){
  return Session.get('curTemplate') === 'tblScheduler';
})

更新我想我在执行迈克尔·弗洛伊德的建议时犯了错误

主要模板（初始显示的模板）是“tblScheduler”。以下是我补充的内容：

//main.html：

<body>

  <div class="container">
    {{> mnuScheduler}}
    {{> Template.dynamic template=currentTemplate}}    
    {{> backButton}}
  </div>

</body>

<template name="backButton">    
    <div>
        <button class="hide" type="button" id="btnGoBack" name="btnGoBack">Go Back</button> 
    </div>
</template>

<body>
  <div class="container">
    {{> mnuScheduler}}
    {{> Template.dynamic template=currentTemplate}}
    {{#unless isChiefTemplate}}
      <button type="button" id="btnDisplayScheduleTemplate" name="btnDisplayScheduleTemplate">Display Schedule</button>
    {{/unless}}
    {{> footer}}
  </div>

</body>

但是“显示计划”按钮在主模板（tblScheduler）上仍然可见

注意：“body”事件起作用-单击按钮可从任何其他模板切换到主模板（tblScheduler）；只是即使在主模板上也可以看到该按钮，这仍然是问题所在。

只需将“后退”按钮放在主模板上，然后用

{{#unless isMainPage}}
  <button class="hide" type="button" id="btnGoBack" name="btnGoBack">Go Back</button>
{{/unless}}

这样：

它会自动出现在每一页上

它的事件处理程序只能位于主模板上

在Template.tblScheduler.helpers中定义帮助程序不起作用，正如您从以下位置所说：

创建如下所示的全局模板：

  Template.mnuScheduler.events({
    "click #mniOpenExisting": function () {
      Session.set('curTemplate', 'scheduleOpenExisting');
      Template.body.$('btnBack').addClass('hide');      
    },

Template.registerHelper('isChiefTemplate', function(){
  return Session.get('curTemplate') === 'tblScheduler';
})

或者在主体模板上定义它：

Template.body.helpers({
  isChiefTemplate:  function(){
    return Session.get('curTemplate') === 'tblScheduler';
  },
});

以及您的更新/Michel Floyd回答中的模板：

{{#unless isChiefTemplate}}
  <button type="button" id="btnDisplayScheduleTemplate" name="btnDisplayScheduleTemplate">Display Schedule</button>
{{/unless}}

{{#除非是hieftemplate}
显示时间表
{{/除非}

一种方法是在访问之前跟踪url，我不知道您使用的是哪种路由器，但如果flow router是我在退出触发器上跟踪的内容，返回按钮可以链接到最后一个url，则隐藏返回主模板。我不使用url；只需交换模板（SPA方法-无需应用路由器-无论如何，到目前为止；该项目仍处于初级阶段/蹒跚学步）。哦，我明白了，您的

chiefTemplate

正在动态交换其他模板，因此它始终处于活动状态。您必须将

currentTemplate

作为参数传递给助手，然后根据其值进行决定。