each in each object

by Durtto

HTML

<script src="http://www.fsfoo.com/js/vendor/handlebars-1.0.rc.2.js"></script>
<script id="some-template" type="text/x-handlebars-template">
<option value="none">Selec</option>
{{#each data}}
<optgroup label="{{@key}}">
{{#each this}}
<option value="{{id}}">{{name}}</option>
{{/each}}
</optgroup>
{{/each}}
</script>
<select></select>

JavaScript

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

var data = {data:{
    fruit: [{
        id: 1,
        name: "banana"
    }, {
        id: 2,
        name: "apple"
    }],
    Vegetables: [{
        id: 1,
        name: "Broccoli"
    }, {
        id: 2,
        name: "Broccoli2"
    }
    ]
}}

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