我如何以编程方式 show/hide 作为 Meteor 主体模板一部分的按钮？

Question

我正在使用 Meteor 应用程序中的 Template.dynamic 功能。显示的初始模板是主要模板，并且通常用户会希望从他们移动到的任何模板立即返回到它。我想通过 "go back" 按钮使这种返回 initial/chief 模板的能力非常明显。

让我先概述一下我是如何更换模板的：

  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}}

我不希望 'go back' 按钮在主模板上可见，因为不需要返回到它本身。

我可以在每个模板的底部放置这样一个 'go back' 按钮，然后在每个模板的 OnRendered 事件中显示它：

$('btnBack').removeClass('hide');

...其中 CSS class 是：

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

...但是这里必须有一种方法来实现 DRY 原则，而不是在每个模板上复制一个 'go back' 按钮。

起初我想如果我把 "back button" 放在正文中，像这样：

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>

...我可以在换出模板的地方添加这样的代码：

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

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

如果我只将后退按钮放在一个地方（'body' 模板），我可以从另一个模板的事件中引用它吗？有没有办法做这样的事情：

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

?

更新

我想我在尝试实施 Michael Floyd 的建议时做错了什么。

主模板（最初显示的那个）是"tblScheduler"。这是我添加的内容：

// main.html:

<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>

// main.js:

Template.tblScheduler.helpers({
  jobLocations: function() {
    return JobLocations.find({}, {sort: {jl_jobloc: 1}, fields: {jl_jobloc: 1}});
  },
  isChiefTemplate: function() {
    return true;
  },
  . . .

Template.body.events({
  'click #btnDisplayScheduleTemplate': function() {
    Session.set('curTemplate', 'tblScheduler');
  }  
}); // Template.body.events({

但是 "Display Schedule" 按钮在主模板 (tblScheduler) 上仍然可见。

注意："body" 事件有效 - 单击按钮确实会从任何其他模板切换到主模板 (tblScheduler)；只是即使在主模板上也可以看到该按钮，这仍然是问题所在。

Answer 1

只需将后退按钮放在主模板上，但用

保护它

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

您只需要一个 isMainPage 帮手。由于 null 是假的，你甚至可以只为你的主模板编写那个帮助器并让它 return true:

Template.main.helpers({
  isMain: function(){ return true; }
});

这样：

它会自动出现在每一页上
它的事件处理程序可以只在主模板上

Answer 2

在 Template.tblScheduler.helpers 中定义助手不起作用，因为您从 body template:

调用它

要么像这样创建一个全局模板：

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

或在正文模板中定义：

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

以及您的 update/Michel 弗洛伊德回答的模板：

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

我如何以编程方式 show/hide 作为 Meteor 主体模板一部分的按钮？

How can I programatically show/hide a button that is part of the body template in Meteor?

javascript

css

meteor

meteor-blaze

meteor-helper

更新