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 ...}}块内。

你应该创建类似的东西：

<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具有以下结构：

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}}。

车把增量变量

1 个答案: