CODEWITHSUNDEEP
javascripthandlebars.js
isHristov
isHristov

Reputation: 1586

Passing a function into a Handlebars template

I'm using (or at least starting with) HandlebarsJS for the html templates but I might have hit a dead end. What I want is to pass a function to the template, e.g.

<div id="divTemplate">
  <span onclick="{{func}}">{{text}}</span>
</div>

and then I would expect to have something like 

var source = $('#divTemplate').html();
var template = Handlebars.compile(source);

var data = {
  "text": "Click here",
  "func": function(){
    alert("Clicked");
  }
};

$('body').append(template(data));

But the function is executed on init, it is not passed into the template and the result is: 

<span onclick="">Click here</span>.

I was trying some stuff with the helper functions as well but I couldn't make it work too. Any ideas would be appreciated. :)

Upvotes: 7

Views: 23079

Answers (2)

Satys
Satys

Reputation: 2425

You can also make global defined callback function, and pass function calling string in the onclick value in the template.

Note the parenthesis with the tmpCallback for func value in data object.

var tmpCallback = function () {
    alert('hello');
}

var data = {
  "text": "Click here",
  "func": "tmpCallback()"
};

$('body').append(template(data));

This is just a hack for quick workaround, and I think answer by @BFil may be a better one.

Upvotes: -1

BFil
BFil

Reputation: 13096

The solution is pretty straightforward.

Handlebars will output the properties of the object you're passing into the templates, if the property is a function, it will execute the function and output the returned value

In your example the function doesn't return any value (it just calls alert), so the output is empty.

You could create an helper method like this:

handlebars.registerHelper('stringifyFunc', function(fn) {
    return new Handlebars.SafeString("(" + 
               fn.toString().replace(/\"/g,"'") + ")()");
});

Then from within the template you just need to use it on the function that needs to be stringified:

<div id="divTemplate">
  <span onclick="{{stringifyFunc func}}">{{text}}</span>
</div>

Upvotes: 19

Related Questions