Difference between revisions of "HandlebarsHelpers"

From rbachwiki
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]]< — >[[Hanglebars | Handlebars Category]]< — > [[Java Script|Category]]<-->[[Main_Page| Home]]===
----
'''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>");
}
}
});

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