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

Question

我对流星很陌生，可能我完全不正确地进行了处理。

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

这是标记：

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

这是我拥有的JS：

Template.menu.helpers({
    self: Template.instance(),
    menu_body: self.find('.menu-body'),
    toggler: self.find('.toggler'),

    currently_open: false,
    open: function() {
        menu_body.style.display = 'flex';
    },
    close: function() {
        menu_body.style.display = 'none';
    },
    toggle: function() {
        if(currently_open) close();
        else open();
    }
});

Template.menu.events({
    'click .toggler': function(event, template) {
        console.log(template);
        template.toggle();
    }
});

我以为模板实例可以访问辅助函数，但是根据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

有人可以在这里指出我正确的方向。 如果我做错了，请随时进行仔细检查。

Answer 1

助手用于功能调用-不是事件驱动的作品。

流星具有事件句柄，可用于跟踪诸如点击之类的事件。 您也可以使用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
  }
});

注意事项：此事件句柄假定您的菜单主体类在本例中的“名称”模板下可用。 因此，您将希望此事件处理程序位于您拥有的最高级模板中。 它也假设。

Answer 2

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

这可以通过onCreated()回调来完成

根据文档：

在第一次评估模板的逻辑之前，将调用此方法添加的回调。 在回调内部， this是新的模板实例对象。 您在此对象上设置的属性将从通过onRendered和onDestroyed方法添加的回调以及事件处理程序中可见。

这些回调将触发一次，并且是要触发的第一组回调。 处理创建的事件是在模板实例上设置值的有用方法，这些值是使用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
  }
});

Answer 3

这实际上很有趣，但是我创建了一个迷你包来帮助您做到这一点： https : //atmospherejs.com/voidale/helpers-everywhere

但是对于您而言，这不是正确的方法。 我可以看到你想要添加的显示器无论是flex或none ，最好添加CSS元素一样active持有display: flex ，并添加active或删除其上点击这样的： $('').addClass('active') or $().removeClass('active')

一个班轮也可以在这里工作： $('.menu-body').toggleClass('active')