I want to use one helper function in another helper function. In below code I want to highlight last name if it contains "Finch" word. I have writtern helper class for that. If we use in hbs file then syntax would be {{highlight name}}. But how to use it since I have to use it in another helper class.

Below is my code:

  Handlebars.registerHelper('fullName', function(person) {
    return person.firstName + " " + person.lastName;
  });

   Handlebars.registerHelper('highlight', function(person) {    
var item = (person.lastName).replace('Finch', '<span style="color: red">' 
  + Finch + '</span>');
return new Handlebars.SafeString(item); 
  });

Here is the working fiddle : /

Here is the fiddle where "highlight" helper is called.: / . This will not produce any results since we will get console errors for person.lastName not recognized in "highlight" register helper.

I want to use "highlight" helper in fullname helper for person.lastName. How can this be acheived.

I want to use one helper function in another helper function. In below code I want to highlight last name if it contains "Finch" word. I have writtern helper class for that. If we use in hbs file then syntax would be {{highlight name}}. But how to use it since I have to use it in another helper class.

Below is my code:

  Handlebars.registerHelper('fullName', function(person) {
    return person.firstName + " " + person.lastName;
  });

   Handlebars.registerHelper('highlight', function(person) {    
var item = (person.lastName).replace('Finch', '<span style="color: red">' 
  + Finch + '</span>');
return new Handlebars.SafeString(item); 
  });

Here is the working fiddle : http://jsfiddle.net/wC6JT/4/

Here is the fiddle where "highlight" helper is called.: http://jsfiddle.net/wC6JT/3/ . This will not produce any results since we will get console errors for person.lastName not recognized in "highlight" register helper.

I want to use "highlight" helper in fullname helper for person.lastName. How can this be acheived.

• javascript
• handlebars.js

• @muistooshort : I have updated my code and fiddle. Its typo. it is person.lastName – Cindrella Commented Jul 26, 2013 at 6:57

3 Answers 3

To call a Handlebars helper from another function, you can use Handlebars.helpers:

Handlebars.registerHelper('fullName', function(person) {
    var lastName = Handlebars.helpers.highlight.apply(this, [person.lastName]);
    var firstName = Handlebars.Utils.escapeExpression(person.firstName);
    return new Handlebars.SafeString(firstName + " " + lastName);
});

Handlebars.registerHelper('highlight', function(str) {    
    var safeStr = Handlebars.Utils.escapeExpression(str);
    var item = safeStr.replace("Finch", "<em>Finch</em>");
    return new Handlebars.SafeString(item); 
});

Here is a working fiddle: http://jsfiddle.net/acLcsL6h/1/

Read this blog post for another example.

Extract the contents of the method you want to use in the first method into its own javascript method. Then call that javascript method in both helpers as necessary.

You can't do it unless you refactor the contents of one of the methods into its own javascript method.

So in your case it should look something like this:

Handlebars.registerHelper('fullName', function(person) {
    return person.firstName + " " + highlightJavascript(person);
  });

Handlebars.registerHelper('highlight', highlightJavascript);

highlightJavascript : function(person) {
   var item = (person.lastName).replace('Finch', '<span style="color: red">' 
  + Finch + '</span>');
return new Handlebars.SafeString(item); 
}

you can use this way: http://goo.gl/oY4IIO need not concatenate string.

<script id="tmp" type="text/x-handlebars-template">
    <p>test:   {{test   "2.3333333"}}</p> 
    <p>format: {{format "2.3333333"}}</p>
</script>

Handlebars.registerHelper('format', function (value) {
   return parseFloat(value).toFixed(2);
});
Handlebars.registerHelper('test', function (value) {
    var source = '{{format x}}';
    var context = {x:value};
    var html = Handlebars.compile(source)(context);
    return new Handlebars.SafeString(html);
});
$(document).ready(function () {
    var source = $('#tmp').html();
    var template = Handlebars.compile(source);
    var html = template();

    $('#main').html(html);
});

output: test: 2.33 format: 2.33