Onclick-function On Elements In Handlebars-template

I'm building a simple webapp with just Handlebars.js and some jQuery. Now I have a list of data, and i present them through a Handlebars-template. Then I want some actions associat

Solution 1:

This is because JSON.stringify return a JSON string and contains ".

At the moment, your template may look like this:

<buttononclick="myGreatFunction({{{json this}}})"></button>

Compiled :

<button onclick="myGreatFunction({"foo":"bar"})"></button>
                ^                 ^   ^ ^   ^  ^

And this result as

Uncaught SyntaxError: missing ) after argument list

---

You need to escape those " and you can do this in your helper

Handlebars.registerHelper('json', function(context) {
    returnJSON.stringify(context).replace(/"/g, '"');
});

And this will result as

<buttononclick="myGreatFunction({&quot;foo&quot;:&quot;bar&quot;})"></button>

Solution 2:

Just take out the extra bracket. If you let Handlebars do HTML escaping (which it will automatically on a regular {{json this}} invocation), it will also escape the quotes for you.