Handlebars helper for rendering sub template

by Ben Clayton

HTML

<script src="http://cloud.github.com/downloads/wycats/handlebars.js/handlebars-1.0.0.beta.6.js"></script>
<div id='output'></div>
<script id="template-ingredient-list" type="text/x-handlebars-template">
  <div class="ingedients_list">
   {{#each ingredient_list}}
      xxx
     {{> ingredient_item}}{{seperator}}
   {{/each}}
  </div>
</script>
	
<script id="template-ingredient-item" type="text/x-handlebars-template">
  <div class="item">
    {{> ingredient}}
    <div class="qtyOrPercent">
      {{qtyOrPercentage}}
    </div>
  </div>
</script>
<script id="template-ingredient" type="text/x-handlebars-template">
  <div class="name {{#if ingredient.allegen}}allegen{{/if}}">  
  {{ingredient.name}}
  </div>
</script>

CSS

.allegen {color:red}

JavaScript

function vm_ingredient_list(){
        this.data = {ingredient_list:[{quantity:'100ml',ingredient:{name:'coke'}},{quantity:'20ml',ingredient:{name:'water'}},{percent:'1%',ingredient:{name:'Sunset Yellow',allegen:1}}]};

    this.qtyOrPercentage =function(){return this.percent};
    this.seperator=",";
    this.get_template = function(){
        return $("#template-ingredient-list").html();
    }
    this.show_view = function(){
        this.template = this.template ||  Handlebars.compile(this.get_template());// if you don't give string, if you give a function it errors in handlebars this._input.match
        var html=this.template(this.data);
        $('#output').html(html);
    }
    return this;
}

$(document).ready(function() {
    //debugger;
    Handlebars.registerPartial("ingredient_item",$("#template-ingredient-item").html());
    Handlebars.registerPartial("ingredient",$("#template-ingredient").html());
    Handlebars.registerHelper('qtyOrPercentage', function(context, options) {
      return context[1];
    });
    var vm = new vm_ingredient_list();
    //vm.get_ingredient_list();
    vm.show_view();
});