Handlebars JS：是否可以将变量从一个助手传递到另一个助手？答案

【问题标题】：Handlebars JS: Is it possible to pass a variable from one helper into another?Handlebars JS：是否可以将变量从一个助手传递到另一个助手？
【发布时间】：2014-05-16 22:48:43
【问题描述】：

我正在尝试构建一个 HTML，它将在我的最终用户想要用于产品轮播的 jQuery Cycle 轮播插件中使用。该插件要求 HTML 看起来像这样：

<div id="slide-0"><!-- anything in here --></div>
<div id="slide-1"><!-- anything in here --></div>
<div id="slide-2"><!-- anything in here --></div>
<!-- etc. -->

但是，产品数量是动态的。在这种情况下，它来自这样的 JSON 对象：

JSON

var productJsonResponse = {
   "products": [{
       "Name": "Bulb"
    },
    {
       "Name": "Wrench"
    },
    {
       "Name": "Hammer"
    },
    {
       "Name": "Screwdriver"
    },
    {
       "Name": "Pliers"
    }]
}

这是我想要构建的 Handlebars 模板。我不能使用默认的{{#each}} 助手，因为我需要创建外部“幻灯片”div。 {{#createCarouselSlides}} 是一个自定义助手，最终用户可以在其中输入他/她想要创建的幻灯片数量。

模板

{{#createCarouselSlides 2 products}}
<div id="slide-{{@index}}">
    {{#customFunctionInner 2 ??? products}}
        <div class="product">
            <span class="product-name">{{Name}}</span>
        </div>
    {{/customFunctionInner}}
</div>
{{/createCarouselSlides}}

我想出了如何使用自定义帮助程序创建外部 div 部分，并查看 Handlebars 源代码以了解 {{#each}} 的工作原理。但是，我不确定如何将{{@index}} 传递到我需要细分产品的内部自定义函数 (customFunctionInner)。例如，如果有 5 个产品，最终用户想要每张幻灯片 2 个产品，我将生成 3 个幻灯片，但我需要索引才能知道哪些产品进入哪个幻灯片。

外部助手

<script type="text/javascript">
; (function ($, Handlebars, window, document, undefined) {
    Handlebars.registerHelper('createCarouselSlides', function (productsPerSlide, context, options) {
        var result = "",
            data = {};

        // Create the necessary number of slides and populate them with the products in $products.
        for (i = 0; i < Math.ceil(context.length / productsPerSlide); i += 1) {
            data.index = i;
            result += options.fn(context[i], { data: data });
        }

        return result;
    });
})(jQuery, Handlebars, window, document);
</script>

我的问题是：我可以从我的第一个助手那里获取{{@index}} 并将其简单地传递给另一个自定义助手吗？语法是什么样的？

这在普通的 Javascript 中作为一对外部 (i) 和内部 (j) for 循环通常“容易”执行，其中外部循环控制幻灯片 div 的生成并将 i 传递给内部循环。

【问题讨论】：

标签： javascript templates handlebars.js

【解决方案1】：

我解决了我的问题。它需要在外部帮助器中为索引创建一个私有变量，并在内部帮助器中通过 options.data.index 访问它。由于内部助手与子模板相关联，因此内部助手可以访问该变量。

模板

{{#createCarouselSlides 2 products}}
    <div id="slide-{{@index}}">
      {{#createCarouselItemr 2 ../products}}
         <div class="product">
            <span class="product-name">{{Name}}</span>
        </div>
      {{/createCarouselItem}}
     </div>
{{/createCarouselSlides}}

帮助者

; (function ($, Handlebars, window, document, undefined) {
    /* Outer function */
    Handlebars.registerHelper('createCarouselSlides', function (productsPerSlide, context, options) {
        var result = "";

        /* Create the necessary number of slides */
        for (var i = 0; i < Math.ceil(context.length / productsPerSlide); i += 1) {
            if (options.data) {
                data = Handlebars.createFrame(options.data || {});
                data.index = i;
            }

            result += options.fn(context[i], { data: data });
        }

        return result;
    });

    /* Inner Function */
    Handlebars.registerHelper('createCarouselItem', function (productsPerSlide, context, options) {
        var result = "",
            currentItemIndex = "";

        /* Create the necessary number of items per slide */
        for (var j = 0; j < productsPerSlide; j += 1) {
            currentItemIndex = (options.data.index * productsPerSlide) + j;
            if (currentItemIndex < context.length) {
                result += options.fn(context[currentItemIndex]);
            }
        }

        return result;
    });
})(jQuery, Handlebars, window, document);

【讨论】：