how to render an array of objects in mustache tag

Question

i have an array of objects as given below:

 var games_string = new Array();
 games_string[0] = { display_name: "sanket" };
 games_string[1] = { display_name: "sky" };

I want to render this array of objects in mustache tag in html page. I referred this site http://mustache.github.com/mustache.5.html and found this solution but its not working...

 <table>
 <tr>
 {{#games_string}}
     <td>
        <b>{{display_name}}</b>
    </td>
 {{/games_string}}
 </tr>
 <table>

Answer 1

The example from the fine manual lays out the basic usage:

var view = {
  title: "Joe",
  calc: function () {
    return 2 + 4;
  }
};

var output = Mustache.render("{{title}} spends {{calc}}", view);

If your template is in tmpl then you'd want to do something like this:

var data = {
    games_string: [
        { display_name: "sanket" },
        { display_name: "sky" }
    ]
};
var html = Mustache.render(tmpl, data);

You need to give render an object to associate names with values, otherwise Mustache will have no idea what {{#games_string}} is supposed to refer to in the template. Just creating a variable called games_string isn't enough, you have to tell Mustache what data should be associated with the games_string name inside the template.

Demo: http://jsfiddle.net/ambiguous/9y7ju/