Difference between revisions of "HandlebarsHelpers"
Jump to navigation
Jump to search
(Created page with "<pre> <script id="content" type="text/x-hanglebars-template"> {{makeLink "Text for Link" "http://www.outwater.com"}} </script> </pre> '''JavaScript''' <pre> Handlebars.registe...") |
|||
(7 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
'''Helpers have to be defined before you call them ''' | |||
<pre> | <pre> | ||
<script id="content" type="text/x-hanglebars-template"> | <script id="content" type="text/x-hanglebars-template"> | ||
Line 15: | Line 16: | ||
}); | }); | ||
</pre> | </pre> | ||
===[[#top|Back To Top]]< — >[[ | ---- | ||
'''Passing Options''' | |||
<pre> | |||
// css | |||
<style> | |||
.redText{color:red} | |||
.blueText{color:blue} | |||
.greenText{color:green} | |||
</style> | |||
{{changeColor "make my text red" color="blue"}} | |||
</pre> | |||
'''JavaScript''' | |||
<pre> | |||
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>"); | |||
} | |||
} | |||
}); | |||
</pre> | |||
---- | |||
===[[#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>"); } } });