Handlebars JS:有可能将一个变量从一个helper传递到另一个helper吗?

Handlebars JS: Is it possible to pass a variable from one helper into another?

本文关键字：helper 一个 另一个 JS 有可能 Handlebars 变量      更新时间：2023-09-26

我试图建立一个HTML，将在jQuery循环轮播插件，我的最终用户想要使用的产品轮播。这个插件要求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"
    }]
}

这是我想要构建的把手模板。我不能使用默认的{{#each}} helper，因为我需要创建外部的"slide"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部分，并查看有关{{#each}}如何工作的Handlebars源代码。但是，我不确定如何将{{@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传递给内部循环。

我的问题解决了。它需要在外部帮助器中为索引创建一个私有变量，并通过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);
相关文章：