從模板事件回調內部調用模板幫助器函數

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