Question

我正在尝试构建一个HTML，它将用于我的最终用户想要用于产品轮播的jQuery Cycle carousel插件中。该插件要求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部件，并查看有关{{#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传递给内部循环。

Answer 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);

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

1 个答案: