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

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

下面是标记：

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

我以为模板实例都可以访问的辅助功能，但根据日志语句，这是模板实例组成的内容：

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

有人可以指着我方向在这里。如果我错了，请随时仔细检查。

来源

2015-07-10 LukeP

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

回调添加了这种方法[被]叫你的模板的逻辑首次评估之前：

这可以通过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 
    } 
});

来源

2015-07-11 11:51:16 LukeP

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

流星有一个事件处理，你可以用它来追踪点击次数的事件。你也可以使用你的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 
    } 
});

需要注意以下几点：该事件句柄假设你的菜单体类可在我的例子叫做“名”的模板下。所以你会想要这个事件处理程序在你所拥有的最顶层模板上。它也假设。

来源

2015-07-10 01:50:19 Flanamacca

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

但在你的情况下，它没有这样做的正确方法。我可以看到你想要添加的显示器无论是flex或none，最好添加CSS元素像active持有display: flex并添加active或删除其上点击这样的：$('').addClass('active') or $().removeClass('active')

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

来源

2015-07-11 19:29:04

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

回答

相关问题