Using Handlebars templates with external JSON

Question

I feel really stupid, but I can\'t figure this out. I\'m trying out Handlebars.js, but I can\'t get it to display data from the Twitter API. Here\'s what I\'ve got:

Answer 1

You have to convert string into object, because Handlebar template wrap only object.

Try this

success : function( tweets ) {
var source = $('#tweet-template').html();
var template = Handlebars.compile(source);

var context = $.parseJSON(tweets); // convert string into object.
$('#container').html(template(context)); //wrap in an Object.

}

Answer 2

Here you are passing an Object to the template function.

var context = { tweets : [
  { text : "This is a test tweet" },
  { text : "And this is yet another" },
  { text : "And you always need three test tweets, right?" }
]};

$('#container').html(template(context));

But in the code that doesn't work:

 success : function( tweets ) {

    var source = $('#tweet-template').html();
    var template = Handlebars.compile(source);
    var context = tweets;

    $('#container').html(template(context));
  }

That 'tweets' variable is not an Object, its an Array.

I think that is what you are doing wrong. Try this:

 success : function( tweets ) {

    var source = $('#tweet-template').html();
    var template = Handlebars.compile(source);
    var context = tweets;

    $('#container').html(template({tweets:context}));//wrap in an Object.
  }

Posting your template could help more as well.