jquery - Handlebars 增量变量

Question

我是 Javascript 模板新手

<script id="template" type="text/x-handlebars-template">
    <div  class="inner_recipe_box {{index}}">
        <div class="recipe_box_img">
            <a data-ref='Retailbox'  href='{{plink}}' title='{{ptitle}}'></a>
        </div>
    </div>
</script>

我正在寻求向inner_recipe_box添加一个递增类，例如box1 box2 box3，我不确定如何在不转换为每个的情况下完成此操作，如果我需要在这里使用每个，我需要对我的代码进行哪些更改，我尝试过使用 {{index}} 和 {{@index}} 但徒劳

Answer 1

使用index的正确方法是{{@index}}，它仅在{{#each ...}}内有效> block 。

您应该创建类似的内容:

<script id="template" type="text/x-handlebars-template">
   {{#each elements}}
        <div  class="inner_recipe_box{{@index}}">
            <div class="recipe_box_img">
                <a data-ref='Retailbox'  href='{{plink}}' title='{{ptitle}}'></a>
            </div>
        </div>
    {{/each}}
</script>

其中元素具有以下结构:

elements = [{
    plink: '/some/url/123',
    ptitle: 'The title'
},{
    plink: '/other/url/123',
    ptitle: 'Great Gatsby'
},{
    plink: '/cool/url',
    ptitle: 'Sherlock'
}, ...]

注意:如果您希望有 inner_recipe_box1 inner_recipe_box2 等，则不应在 box 之间添加空格和{。

正确:inner_recipe_box{{@index}} 错误:inner_recipe_box {{@index}}。