Handlebars JS：是否可以將一個變量從一個助手傳遞到另一個助手？

Question

我正在嘗試構建一個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" 
    }] 
} 

這是把手模板我想建立。我不能使用默認的{{#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}} 

我想通了如何創建使用自定義的助手，看着如何{{#each}}工程車把源代碼外的div的一部分。但是，我不確定如何將{{@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循環通常是「容易的」，其中外循環控制幻燈片的生成並將我傳遞給內部循環。

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