无法使用车把助手渲染json细节

Question

I'm trying to stringify an object to json and pass it to a template. But instead I see whole object as a string rather than only what I want.

Code

Handlebars.registerHelper("GetFBUserDetails", function() {

    var details = new Object({'fName' : firstName, 'lName' : lastName, 'pic' : pictureUrl});
    return JSON.stringify(details);

});

<li>{{#GetFBUserDetails}} 
              {{fName}}
    {{/GetFBUserDetails}}
</li>

I want only the firstname (fName) to be shown in li instead the whole object shows up as a string.

Answer 1

JSON.stringify() does what it's named after, it takes a JSON object and serializes it into a string. Handlebars uses objects, not strings.

This should do it:

Handlebars.registerHelper("GetFBUserDetails", function() {
    return  {'fName' : firstName, 'lName' : lastName, 'pic' : pictureUrl};
});

Answer 2

To apply the template, you need to actually pass the result to the Handlebars processor. Do this using the parameter (options) of the callback function to the object (not stringified):

Handlebars.registerHelper("GetFBUserDetails", function(options) {
    var details = new Object({'fName' : firstName, 'lName' : lastName, 'pic' : pictureUrl});
    return options.fn(details);
});

Fiddle