Difference between revisions of "HandlebarsHelpers"
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]]< — >[[ | ===[[#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>"); } } });