How to use this when calling template helper dynamically

help
1

Hi,
I’m need to call a template helper from an event, but found out that the ‘this’ in the helper is ‘undefined’ and I cannot access any data. Can anyone help me?

Here is the code:

<template name="bubble">
    <p>{{name}}</p>
</template>

Template.bubble.helpers(
    toggleImg: function() {
        var imgId = this.imgId;
        $("#" + imgId).toggle();
    }
});

Template.bubble.events({
    'click button': function(event, template) {
        event.preventDefault();        
        // toggle image.
        Template.bubble.__helpers.get('toggleImg')(); 
    }
});

In the event I can see template.data, for instance, {name: “my bubble”, imgId: “#myimgId”}
As a workaround I can pass template.data when calling the helper function to make it work.

Thanks.
Best regards,
Hugo

2

If imgId is a template parameter:

Template.bubble.events({
    'click button': function(event, template) {
        event.preventDefault();        
        // toggle image.
        template.$("#" + template.data.imgId).toggle();
    }
});

If imgId is a template parameter or not:

Template.bubble.events({
    'click button': function(event, template) {
        event.preventDefault();        
        // toggle image.
        template.$("#" + Template.currentData().imgId).toggle();
    }
});
3

Hi Steve,
Thanks for the help but I really want to use an helper because I only showed you part of the code. The toggleImg helper:

Template.bubble.helpers(
  toggleImg: function() {
    var imgId = this.imgId;
    $("#" + imgId).toggle();
    var caption = this.name;
    if(caption.length == 0) {
	caption = "Default caption";
    }
    if(caption.length > 20) {
	caption = caption.substring(0, 9);
    }
    $("#" + imgId).attr("caption", caption);
  }
});

and I need to have an helper so I can called it from different events, for instance:

Template.editBubble.events({
    'click button': function(event, template) {
        event.preventDefault();        
        // toggle image.
        Template.bubble.__helpers.get('toggleImg')(); 
    },
    'click .cancel': function(event, template) {
        event.preventDefault();    
        template.data.name = "";    
        // toggle image.
        Template.bubble.__helpers.get('toggleImg')(); 
    }
});
4

Why a helper? Why not a simple function?

function toggleImg(imgId, name) {
    Template.instance().$("#" + imgId).toggle();
    var caption = name;
    if(caption.length == 0)
	caption = "Default caption";
    if(caption.length > 20)
	caption = caption.substring(0, 9);
    Template.instance().$("#" + imgId).attr("caption", caption);
  }
});

Template.editBubble.events({
    'click button': function(event, template) {
        event.preventDefault();        
        toggleImg(template.data.imgId, template.data.name); 
    },
    'click .cancel': function(event, template) {
        event.preventDefault();    
        toggleImg(template.data.imgId, ""); 
    }
});

Side note: modifying the data context of a template is not valid (template.data.name = ""). It might work now, but could break in the future.

6

Hi Steve,
Thanks!

Best regards,
Hugo