通过 handlebars blockhelper 传递变量

Question

我想在我的自定义块助手中传递和编译参数。我发现参数在哈希对象中，但如何将它们编译成部分？

我希望将参数 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)); *
    }) 
};

我已经尝试了一些方法，但我总是收到警告...

Warning: string is not a function

.hbs 文件

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

给我的 blockhelper 打电话

{{#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}}

更新

是否可以将一个参数从我的 blockhelper 传递给另一个部分？

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

我想用 "id"

扩展这个部分

{{#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] 参数未编译，[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>

Answer 1

您不能 "compile" 将 flyoutClass 参数添加到部分模板中，因为您希望此参数是动态的。这意味着它实际上只是模板数据的另一个参数：

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

更新

... but there is no way to add the params dynamicly??[sic]

如果您希望将所有传递给您的助手的参数传递给您的助手，您只需使用 options.hash:

在您的助手中扩展一个模板数据对象

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

通过 handlebars blockhelper 传递变量

Passing variables through handlebars blockhelper

handlebars.js

partials