Using Handlebars.js helpers to create active elements with jQuery?

Question

Is it possible to within a Handlebars.js helper to create elements using jQuery and attach event handler to them? I'd like to be able to create active elements using helpers.

Example:

Handlebars.registerHelper("button", function(title) {
    var button = $('<button>').text(title);
    button.click(function() {
        alert("Button " + title + " clicked.");
    });
    return $('<div>').append(button).html();
});

In the handlebars template I instantiate the button like this:

{{{button "Click Me!"}}}

I understand that this can not work, since the jQuery's html() function `removes' the event handler... but simply returning button obviously does not work either. Handlebars helpers should be able to return DOM nodes, but this is not possible, right? I tried to return button.get(), but without success.

Any ideas?

sinemetu1 sinemetu1 · Accepted Answer · 2012-02-05T00:06:22

What you could do is create a function outside of registerHelper to be called onClick. So the code for that would look like this:

Handlebars.registerHelper("button", function (text) {
    var button = $('<button></button>').text(text).attr('onclick', 'button_clickEvent()');
    return $('<div></div>').append(button).html();
});

var button_clickEvent = function () {
    alert("Button " + $(this).text() + " clicked.");
};

Using Handlebars.js helpers to create active elements with jQuery?

2 Answers