Handlebars JS Example 1

HTML

<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<h1>Handlebars JS Example</h1>
<script id="some-template" type="text/x-handlebars-template">
	<ul>
    {{#each this}}
    <li>
      {{@key}}
      <ul>
    	{{#each this}}
      	<li>{{@key}}: {{this}}</li>
      {{/each}}
      </ul>
     </li>
    {{/each}}
  </ul>
</script>

CSS

ul {
  padding-left:20px;
  list-style:disc;
}
ul ul {
  list-style:circle;
}

JavaScript

var source = $("#some-template").html(); 
var template = Handlebars.compile(source); 

var data = {  
   "DistributedQueue-0":{  
      "MessagesCurrentCount":"0",
      "MessagesPendingCount":"0",
      "MessagesReceivedCount":"0",
      "MessagesHighCount":"0",
      "ConsumersCurrentCount":"0",
      "ConsumersHighCount":"0",
      "ConsumersTotalCount":"0"
   },
   "PatientNotificationQueue":{  
      "MessagesCurrentCount":"0",
      "MessagesPendingCount":"0",
      "MessagesReceivedCount":"0",
      "MessagesHighCount":"0",
      "ConsumersCurrentCount":"0",
      "ConsumersHighCount":"0",
      "ConsumersTotalCount":"0"
   },
   "Topic-0":{  
      "MessagesCurrentCount":"0",
      "MessagesPendingCount":"0",
      "MessagesReceivedCount":"0",
      "MessagesHighCount":"0",
      "ConsumersCurrentCount":"0",
      "ConsumersHighCount":"0",
      "ConsumersTotalCount":"0"
   }
}; 

Handlebars.registerHelper('fullName', function(person) {
  return person.firstName + " " + person.lastName;
});

$('body').append(template(data));