Is it possible to nest helpers inside the options hash with handlebars?

Question

For instance, is there a way to nest my "i18n" helper inside another helper's hash variable?

{{view "SearchView" placeholder="{{t 'search.root'}}" ref="search" url="/pages/search" className='home-search'  polyfill=true}}

Solution 1

Update: Handlebars now supports subexpressions, so you can just do:

{{view "SearchView" (t 'search.root')}}

Solution 2

Your scenario is not directly supported, but there a couple of workarounds you can use. The handlebars helpers are just javascript code, so you can execute them from within the helper code itself:

function translateHelper() {
    //...
}

function viewHelper = function(viewName, options) {
    var hash = options.hash;
    if(hash.placeholder) { 
        hash.placeholder = translateHelper(hash.placeholder);
    }
};

Handlebars.registerHelper('view', viewHelper);
Handlebars.registerHelper('t', translateHelper);

And just pass the i18n key to as the argument:

{{view placeholder="search.root"}}

This is nice, as long as your helper knows which arguments should be localized, and which not. If that is not possible, you can try running all the helper arguments through Handlebars, if they contain a handlebars expression:

function resolveNestedTemplates(hash) {
  _.each(hash, function(val, key) {
    if(_.isString(val) && val.indexOf('{{' >= 0)) {
      hash[key] = Handlebars.compile(val)();
    }
  });
  return hash;
}

function view(viewName, options) {
  var hash = resolveNestedTemplates(options.hash, this);
}

And use the nested template syntax you described:

{{view placeholder="{{t 'search.root'}}" }}

I realize neither of these options are perfect, but they're the best I could think of.

Comments

[mateusmaso]

thanks man, great answer by the way.. as you said my translateHelper also can take more options so your second solution might be the best workaround for now, I'll just improve the method but the idea still the same.. I'm just wondering if doing this I shall be making mistakes about how handlebars should really work

[jevakallio]

@mateusmaso, my proposed solution is not exactly how handlebars should work, I'll grant you that, but on the other hand I don't see a great alternative to your particular problem. Maybe look into partials and block helpers and see if there's a more natural solution for your case: github.com/wycats/handlebars.js

[mateusmaso]

yeah, I asked that same question inside their github repository issue.. let see what they think, but I agree with you.. it cant go too much nested, if so I would have to move it to the scope because the template code will be unreadable

[Alex LaFroscia]

This is the correct (and much better) answer. Thank you!