cfurrow
1/13/2011 - 2:13 AM

handlebars.js

var data = {
    "properties":[
        {name:"Some property", address: "Some address", forsale: "yes"},
        {name:"Some other property", address: "Some other address", forsale: "no"},
    ]
};

var source =    "<ul class='properties'>";
source +=       "{{#properties}}";
source +=       "  <li class='property'>";
source +=       "    <div>Name: {{name}}</div>";
source +=       "    <div>Addres: {{address}}</div>";
source +=       "    <div>For Sale?: {{forsale}}</div>";
source +=       "  </li>";
source +=       "{{/properties}}";
source +=       "</ul>";

var template = Handlebars.compile(source);
var html = template(data);

// html would look like this:
// <ul class='properties'>
//  <li class='property'>
//      <div>Name: Some property</div>
//      <div>Address: Some address</div>
//      <div>For Sale?: yes</div>
//  </li>
//  <li class='property'>
//      <div>Name: Some other property</div>
//      <div>Address: Some other address</div>
//      <div>For Sale?: no</div>
//  </li>
// </ul>