Javascript 从模板事件回调内部调用模板帮助器函数

我对meteor非常陌生，我可能完全错误地处理了这个问题

我有一个代表菜单栏的简单模板。当用户单击一个图标时，菜单应该出现。当他们再次点击它时，它应该会消失

以下是标记：

<template name="menu">
  <div class="menu">
    <div class="toggler">
      <i class="fa fa-bars fa-3x"></i>
    </div>
    <div class="menu-body">
       <!-- ... -->
    </div>
  </div>
</template>

我以为模板实例可以访问helper函数，但根据log语句，模板实例由以下部分组成：

B…e.TemplateInstance {view: B…e.View, data: null, firstNode: div.menu, lastNode: div.menu, _allSubsReadyDep: T…r.Dependency…}
  _allSubsReady: false
  _allSubsReadyDep: Tracker.Dependency
  _subscriptionHandles: Object
  data: null
  firstNode: div.menu
  lastNode: div.menu
  view: Blaze.View
  __proto__: Blaze.TemplateInstance

---

有人能给我指一下正确的方向吗。如果我做错了，请不要客气

助手用于功能调用，而不是事件驱动的工作

Meteor有一个事件句柄，你可以用它来跟踪像点击这样的事件。您还可以使用css类很好地定义样式，而无需编程覆盖样式

Template.name.events({
'click .menuToggler': function(event, template) {
  event.preventDefault();
  var menu = template.find('.menu-body'); //(make this in ID!)
  if($(menu).hasClass('menuOpen')) {
     $(menu).removeClass('menuOpen');
     //menu.style.display = 'none';
  } else {
     $(menu).addClass('menuOpen');
     //menu.style.display = 'flex'; Use css to define these on the menuOpen class
  }
});

---

需要注意的是：此事件句柄假定菜单体类在我的示例中名为“name”的模板下可用。因此，您将希望此事件处理程序位于您拥有的最顶层模板中。它还假设

如果要在模板的各个组件（助手、事件回调等）之间共享状态，应直接在模板实例上设置属性

这可以通过回调来完成

根据文件：

使用此方法添加的回调在模板逻辑之前被调用 这是第一次评估。在回调中，

这是新的
模板实例对象。您在此对象上设置的属性将是
从使用onRendered和OnStroted添加的回调可见
方法和事件处理程序中的

这些回调只触发一次，是第一组要调用的回调
火处理创建的事件是在上设置值的有用方法
使用从模板帮助程序读取的模板实例
Template.instance（）

因此，提供一个比我原来问题中的例子更相关、更简洁的例子

Template.menu.onCreated(function() {
  this.items =  [
    {title: 'Home',    icon: 'home'},
    {title: 'Profile', icon: 'user'},
    {title: 'Work',    icon: 'line-chart'},
    {title: 'Contact', icon: 'phone'}
  ];
});

Template.menu.helpers({
  items: function() {
    var self = Template.instance();
    return self.items;
  }
});

Template.menu.events({
  'click .toggler': function(event, template) {
    console.log(template.items); //[Object,Object,Object,Object]
    //do something with items
  }
});

这其实很有趣，但我创建了一个迷你软件包，可以帮助您做到这一点：

但对你来说，这不是正确的做法。我可以看到你想要添加一个显示，或者
flex
或者
none
最好添加CSS元素，比如
active
，它保持
display:flex
并添加
active
，或者像这样点击：
$（''）.addClass（'active'）或者$（）.removeClass（'active'）

这里也可以使用一行代码：
$（'.menu-body'）.toggleClass（'active'）

Template.menu.onCreated(function() {
  this.items =  [
    {title: 'Home',    icon: 'home'},
    {title: 'Profile', icon: 'user'},
    {title: 'Work',    icon: 'line-chart'},
    {title: 'Contact', icon: 'phone'}
  ];
});

Template.menu.helpers({
  items: function() {
    var self = Template.instance();
    return self.items;
  }
});

Template.menu.events({
  'click .toggler': function(event, template) {
    console.log(template.items); //[Object,Object,Object,Object]
    //do something with items
  }
});