通过把手传递变量阻止

时间:2016-07-26 20:49:13

标签: handlebars.js partials

我想在自定义块助手中传递和编译params。我发现params在hash-object中,但是如何将它们编译成partial?

我希望将参数flyoutClass编译成我的部分。一切正常,但我的参数的输出应该是空的......

车把助手

module.exports.register = function (Handlebars, context)  { 
    Handlebars.registerHelper('injectHtml', function(name, options) {
        console.log(options.hash); //yeah my param
        var partial = Handlebars.partials[name];
        var template = Handlebars.compile(partial);
        //var template = Handlebars.compile(partial)(options.hash); *
        var output = template({"body":  options.fn(this)});     
        return new Handlebars.SafeString(output); 
        //return new Handlebars.SafeString(output(options.hash)); *
        //return new Handlebars.SafeString(partial(output)); *
    }) 
};

我已经尝试了一些东西,但我总是得到那个警告......

  

警告:字符串不是函数

.hbs文件

<div class="flyout {{flyoutClass}}">
    <button>flyout-button</button>
    <div class="flyout__content">
        {{{body}}}
    </div> 
</div>

打电话给我的阻截者

{{#injectHtml "flyout" flyoutClass='navigation__item'}}
    <div class="wrapper">
        <h3>Headline</h3>
        <p>some copy</p>
        <button>CTA</button>
    </div
    <div class="wrapper">
        <h3>Headline</h3>
        <p>some copy</p>
        <button>CTA</button>
    </div>
{{/injectHtml}}

UPTADE

是否可以从我的blockhelper传递给另一个部分?

var output = template({
    "addClass": options.hash.addClass,
    "id": options.hash.id,
    "body": options.fn(this)
});

我喜欢用&#34; id&#34;

{{#injectHtml "flyout" flyoutClass='navigation__item'id='myUniqueID'}}

并在我的部分按钮

中使用它
<div class="flyout {{flyoutClass}}">
    {{>button btn="icon-text" id="{{id}}"/*[1]*/ icon="arrow-down"label="klick me"}}
    <div class="flyout__content" aria-labelledby="{{id}}"/*[2]*/> 
        {{{body}}}
    </div> 
</div>

但在[1],param没有被编译,[2]工作正常。

<div class="flyout navigation__item">
    <a href="#" id="{{id}}"/*[1]*/ aria-expanded="false">
    <div class="flyout__content" aria-labelledby="myUniqueID"/*[2]*/> 
        //html content
    </div> 
</div>

1 个答案:

答案 0 :(得分:1)

您无法将flyoutClass参数“编译”到部分模板中,因为您希望此参数是动态的。这意味着它实际上只是模板数据的另一个参数:

var output = template({
    "flyoutClass": options.hash.flyoutClass,
    "body": options.fn(this)
});

<强>更新

  

...但是没有办法动态添加参数?[原文如此]

如果您希望传递传递给助手的所有参数,您只需使用options.hash在助手中扩展模板数据对象:

var data = Handlebars.Utils.extend({ body: options.fn(this) }, options.hash);
var output = template(data);