Question

我有一个Handlebar帮助器来调用模板中的模板，

用法是：

applyTemplate subTemplateId arg1 = 123 arg2 =“abc”...

也可以传递html内容

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

这个jsFiddle说明了它的工作原理：http://jsfiddle.net/maxl/ywUjj/

我的问题：我希望可以访问调用范围中的变量在子模板中，在jsFiddle中，注意{{topLevelVar}} 不可用。

由于

Answer 1

从这个例子中我会说你可以使用fn来访问helper方法中的上下文 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]))
    }
}

其中fn是内部“模板”部分，上下文是应用于它的模型。

Answer 2

从http://jsfiddle.net/dain/NRjUb/上的解决方案开始，我们可以获得相同的结果，但使用内联模板：

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

并注册把手助手：

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


})();

并用以下方式调用：

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

希望这会有所帮助：）

Answer 3

添加＆＃34; ../"在topLevelVar之前访问父上下文。

例如： {{../ 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>

把手帮手模板组成

3 个答案: