2012-05-10 14 views
5

ich einen Lenker Helfer haben eine Vorlage innerhalb einer Vorlage aufzurufen,Lenker Helfer für Vorlagen Zusammensetzung

die Nutzung ist dies:

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

es ist auch möglich, hTML-Inhalte

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

Dieses jsFiddle zeigt, wie es funktioniert passieren: http://jsfiddle.net/maxl/ywUjj/

Mein Problem: Ich mag die Variablen im Aufruf Umfang im Unter templemplate im jsFiddle zugänglich sein, feststellen, wie {{}} topLevelVar nicht verfügbar ist.

Dank

+3

ich die Antwort gefunden, siehe: http://jsfiddle.net/maxl/2Y9CS/ –

Antwort

0

Aus diesem Beispiel würde sagen, dass ich Sie fn den Kontext, in der Helfer-Methode zugreifen können 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])) 
    } 
} 

Wo fn die innere „Schablone“ Teil ist, und Kontext des Modell das wird darauf angewendet.

0

Ausgehend von der Lösung auf http://jsfiddle.net/dain/NRjUb/ können wir das gleiche Ergebnis erzielen, aber mit Inline-Vorlagen als:

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

und Registrierung der Lenker Helfer wie:

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


})(); 

Und ruft dies mit:

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

Hoffe das hilft :)

0

Fügen Sie "../" vor topLevelVar hinzu, um auf den übergeordneten Kontext zuzugreifen.

Zum Beispiel: {{}} ../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> 
Verwandte Themen