Handlebars helper for template composition

Question

I have a Handlebar helper to invoke a template within a template,

the usage is this :

applyTemplate subTemplateId arg1=123 arg2="abc" ...

It is also possible to pass html content

   {{# applyTemplate "tli" a=1 b="y"}}
   ... any content here will get passed to the sub template with {{content}}
   {{/ applyTemplate }}

This jsFiddle illustrates how it works : http://jsfiddle.net/maxl/ywUjj/

My problem : I want the variables in the calling scope to be accessible in the sub templemplate, in the jsFiddle, notice how {{topLevelVar}} is not available.

Thanks

Answer 1

Starting from the solution on http://jsfiddle.net/dain/NRjUb/ we can achieve the same result but with inline templates as:

<script id="topLevel" type="text/x-handlebars-template">
    {{# defTpl "test1"}}
    La plantilla <b>diu</b> {{part}},{{../topLevelVar}}
    {{/ defTpl }}
    {{# each sub }}
    Iplant-->{{eTpl "test1" part=this}}--fi plant<br>
    {{/each}}    
</script>

And registering the handlebars helpers like:

(function()
{
    var h={};

Handlebars.registerHelper('defTpl', function(name, context){
    // the subtemplate definition is already compiled in context.fn, we store this
    h[name]=context.fn;
    return "";
});

// block level /inline helper
Handlebars.registerHelper('eTpl', function(name, context){
    if (!h[name]) return "Error , template not found"+name;
    var subTemplate =  h[name];
    //if this isn't a block template , the function to render inner content doesn't exists
    var innerContent = context.fn?context.fn(this):"";
    var subTemplateArgs = $.extend({}, context.hash, {content: new Handlebars.SafeString(innerContent)});

    return new Handlebars.SafeString(subTemplate(subTemplateArgs))
});


})();

And calling this with:

var _template =  Handlebars.compile($('#topLevel').html());
$('body').append(_template({topLevelVar:123, content:"cascading",sub:[45,30,12]}));

Hope this helps :)

Answer 2

Add "../" before topLevelVar to access the parent context.

For example: {{../topLevelVar}}

<script id="tli" type="text/x-handlebars-template">
    <tr><td>{{a}}----> {{content}} <----- {{b}}</td></tr>
</script>

<script id="zaza" type="text/x-handlebars-template">
  <table>
      {{# applyTemplate "tli" a=1 b="y"}}<input type="text" value='a'>{{../topLevelVar}}{{/ applyTemplate }}
    {{# applyTemplate "tli" a=2 b="z"}}<input type="text" value='b'>{{/ applyTemplate }}      
  </table>
</script>

Answer 3

From this example i would say you can use fn to access the context in your helper method http://yehudakatz.com/2010/09/09/announcing-handlebars-js/

applyTemplate: function(context, fn) {
    for(var i=0, j=context.length; i < j; i++) {
      buffer.push(fn(context[i]))
    }
}

Where fn is the inner "template" part, and context the model that gets applied to it.