HandlebarsHelpers
Jump to navigation
Jump to search
Helpers have to be defined before you call them
<script id="content" type="text/x-hanglebars-template"> {{makeLink "Text for Link" "http://www.outwater.com"}} </script>
JavaScript
Handlebars.registerHelper("makeLink", function(text, url){ text= Handlebars.Utils.escapeExpression(text); url = Handlebars.Utils.escapeExpression(url); var theLink = '<a href=" + url + '">' + text + '</a>'; return new Handlebars.SafeString(theLink); // SafeString does not escape return });
Passing Options
// css <style> .redText{color:red} .blueText{color:blue} .greenText{color:green} </style> {{changeColor "make my text red" color="blue"}}
JavaScript
Handlebars.registerHelper("changeColor", function(text, options){ text = Handlebars.Utils.escapeExpression(text); if(options.hash.color === 'red'){ return new Handlebars.SafeString("<span class='redText'>"+ text + "</span>"); else if(options.hash.color === 'blue'){ return new Handlebars.SafeString("<span class='blueText'>"+ text + "</span>"); }else{ return new Handlebars.SafeString("<span class='greenText'>"+ text + "</span>"); } } });
Passing options that are available to all helper function you create
{{sayhello}}
JavaScript
Handlebars.registerHelper("sayHello", function(options){ switch(options.data.lang){ } })