Difference between revisions of "HandlebarsHelpers"

From rbachwiki
Jump to navigation Jump to search
 
(3 intermediate revisions by the same user not shown)
Line 19: Line 19:
'''Passing Options'''
'''Passing Options'''
<pre>
<pre>
// css
<style>
    .redText{color:red}
    .blueText{color:blue}
    .greenText{color:green}
</style>
{{changeColor "make my text red" color="blue"}}
{{changeColor "make my text red" color="blue"}}
</pre>
</pre>
Line 25: Line 32:
Handlebars.registerHelper("changeColor", function(text, options){
Handlebars.registerHelper("changeColor", function(text, options){
text = Handlebars.Utils.escapeExpression(text);
text = Handlebars.Utils.escapeExpression(text);
if(options.hash.color === 'red'){
  if(options.hash.color === 'red'){
return new Handlebars.SafeString("<span class='redText'>"+ text + "</span>");
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>");
}
}
}
});
});
</pre>
</pre>
----
----
===[[#top|Back To Top]]< — >[[Hanglebars | Handlebars Category]]< — > [[Java Script|java Script Category]]<-->[[Main_Page| Home]]===
===[[#top|Back To Top]]< — >[[Handlebars| Handlebars Category]]< — > [[Java Script|java Script Category]]<-->[[Main_Page| Home]]===

Latest revision as of 21:12, 17 January 2017

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