I have a JSON that looks like this:

{
list: [
        { name: 'AAA',
          id: 1,
          age: 34
        },
        { name: 'BBB',
          id: 2,
          age: 24
        }
      ]
}

And a template like this:

<ul>
    {{#each list}}
        <li onclick="someFunc({{this}})">{{name}} ({{age}}) </li>
    {{/each}}
</ul>

Basically I just want to pass the current object , to a function that does something with it.

Now if I try it, then the generated HTML just has

 ... onclick="someFunc( [object Object] )" ...

whereas I'd like it to be like this:

 ... onclick="someFunc( {name: 'AAA', id: 1, age: 34} )" ...

How can I fix this?

I have a JSON that looks like this:

{
list: [
        { name: 'AAA',
          id: 1,
          age: 34
        },
        { name: 'BBB',
          id: 2,
          age: 24
        }
      ]
}

And a template like this:

<ul>
    {{#each list}}
        <li onclick="someFunc({{this}})">{{name}} ({{age}}) </li>
    {{/each}}
</ul>

Basically I just want to pass the current object , to a function that does something with it.

Now if I try it, then the generated HTML just has

 ... onclick="someFunc( [object Object] )" ...

whereas I'd like it to be like this:

 ... onclick="someFunc( {name: 'AAA', id: 1, age: 34} )" ...

How can I fix this?

• javascript
• json
• handlebars.js

• 1 Alt: I usually use data* attributes for the properties I want to render in such a scenario – Chandu Commented Oct 29, 2014 at 22:57
• How do you mean? Should I register my own helper method? – Anand Sriraman Commented Oct 29, 2014 at 23:00
• <li onclick="someFunc({{this}})" data-name="{{name}}">{{name}} ({{age}}) </li> – Chandu Commented Oct 29, 2014 at 23:03
• How would that solve my problem? I'm not getting the data properly inside someFunc(). Instead it looks like its doing a tosString on the object and sending me – Anand Sriraman Commented Oct 29, 2014 at 23:06
• It's not a direct answer, should have mentioned that, I render the values as data attributes and in the click handler for the li element I read the data attributes from the event source element and pass the values to any function that needs to be called (like someFun in your case). – Chandu Commented Oct 29, 2014 at 23:07

1 Answer 1

Posting for future references:

Got my answer from here:

Handlebars.js parse object instead of [Object object]

Turns out Handlebar does a toString on the data before pasting into the template. All I had to do was to register a helper method that converts it back to json.

Handlebars.registerHelper('json', function(context) {
    return JSON.stringify(context);
});

<li onclick="someFunc({{json this}})">{{name}} ({{age}}) </li>