HandlebarsHelpers

From rbachwiki
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>");
}
}
});

Back To Top< — > Handlebars Category< — > java Script Category<--> Home