Manillar ayudante para la composición de la plantilla

Question

tengo un ayudante del manillar para invocar una plantilla dentro de una plantilla,

el uso es el siguiente:

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

también es posible pasar el contenido hTML

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

Este jsFiddle ilustra cómo funciona: http://jsfiddle.net/maxl/ywUjj/

Mi problema: Quiero las variables del ámbito llamando sean accesibles en la sub templemplate, en el jsFiddle, observe cómo {{}} topLevelVar no está disponible.

Gracias

Answer 1

partir de este ejemplo, diría que se puede usar fn para acceder al contexto en el método de ayuda 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])) 
    } 
} 

Dónde fn es la "plantilla" parte interior, y el contexto del modelo eso se aplica a eso.

Answer 2

A partir de la solución en http://jsfiddle.net/dain/NRjUb/ podemos lograr el mismo resultado, pero con las plantillas en línea como:

<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> 

y el registro de los ayudantes manillares como:

(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)) 
}); 


})(); 

Y llamando a esto con:

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

Espero que esto ayude :)

Answer 3

Agregue "../" antes de topLevelVar para acceder al contexto primario.

Por ejemplo: {{}} ../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>