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">

  <select name="status" class="form-control">
    <option value="">-- choose --</option>
    {{#each statuses}}
    <option value="{{this._id}}">{{this.name}}</option>
    {{/each}}
  </select>

  <select name="status2" class="form-control">
    <option value="">-- choose --</option>
    {{#each statuses2}}
    <option value="{{this._id}}">{{this.name}}</option>
    {{/each}}
  </select>
</script>

CSS

body {
    font:15px arial,sans-serif;
}
h1 {
    margin: 0 0 10px 0;
    padding: 5px;
    font-size: 24px;
    background-color: #999;
    color: #fff;
}
table {
    margin: 10px;
}
th, td {
    padding: 5px;
    border: 1px solid #999;
}
th {
    background: #ccc;
}
tr:nth-child(odd) {
    background: #eee;
}
td a {
    color: #000;
    text-decoration: underline;
}

JavaScript

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

var data = { 
    statuses:[
    	{_id:1, name:'name1'},
    	{_id:2, name:'name2'}
    ],
    statuses2:{
    	o1:{_id:1, name:'name1'},
    	o2:{_id:2, name:'name2'},
    	o3:{_id:3, name:'name3'}
    }
}; 

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