Question

我对流星很新，我可能会完全错误地解决这个问题。

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

这是标记：

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();
    }
});

这是我的JS：

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

我认为模板实例可以访问辅助函数，但根据日志语句，这是模板实例包含的内容：

{{1}}

有人能指出我在正确的方向吗？如果我错了，请随时仔细检查。

Answer 1

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

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

有些注意事项：此事件句柄假定您的menu-body类在我的示例中名为“name”的模板下可用。因此，您将希望此事件处理程序位于您拥有的最顶级模板中。它也假定。

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，以便更好地添加active等display: flex的CSS元素并添加active或者点击这样删除它：$('').addClass('active') or $().removeClass('active')

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

从模板事件回调中调用模板助手函数

3 个答案: