loops - Handlebars : Get index of an item when there are two rows of items

即使在第二行中，下面的@key也始终提供0 1 2 3。请帮忙。

Handlebars 模板:

{{#grouped_each 4 orderData}}
<div class="row">
    {{#each this }}
    <div class="col-md-3">
        <div class="thumbnail">
            <img src="{{getImageSourceChannel ../../channelNames @key name}}" class="">
            <div class="caption">
                <p><b>{{getObjectAtIndex ../../channelNames @key}}</b></p>
                <p class="">{{slices.4.count}} new orders</p>
                <p class="">{{slices.3.count}} back orders</p>

            </div>
        </div>
    </div>
    {{/each}}
</div>
{{/grouped_each}}

Handlebars 部分:

Handlebars.registerHelper('grouped_each', function(every, context, options) {
    var out = "", subcontext = [], i;
    console.log(every);
    console.log(context);
    console.log(options);
    if (context && context.length > 0) {
        for (i = 0; i < context.length; i++) {
            if (i > 0 && i % every === 0) {
                out += options.fn(subcontext);
                subcontext = [];
            }
            subcontext.push(context[i]);
        }
        out += options.fn(subcontext);
    }
    return out;
});

最佳答案

在局部内部使用带有已声明键的对象

在局部定义中，不要将项目盲目地插入键/索引每四次迭代都会重置的数组，而应使用一个对象，您可以在多次迭代中顺序声明其键。

Handlebars.registerHelper('grouped_each', function(every, context, options) {
    var out        = '',
        subcontext = {}, // Declare an object, instead of an array
        i;
    if (context && context.length > 0) {
        for (i = 0; i < context.length; i++) {
            if (i > 0 && i % every === 0) {
                out += options.fn(subcontext);
                subcontext = {};
            }

            // Declare keys on your object,
            // instead of blindly pushing into an empty array
            subcontext[i] = context[i];
        }
        out += options.fn(subcontext);
    }
    return out;
});

var template = Handlebars.compile($("#template").html());
$("#rendered").html(template(
    {
        "orderData": [
            { "name": "Order 1" },
            { "name": "Order 2" },
            { "name": "Order 3" },
            { "name": "Order 4" },
            { "name": "Order 5" },
            { "name": "Order 6" },
            { "name": "Order 7" },
            { "name": "Order 8" },
        ]
    }
));

#rendered {
  display: table;
}
.row {
  display: table-row;
}
.row > div {
  display: table-cell;
  padding: 0.5em;
  border: 1px solid white;
  background-color: silver;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script id="template" type="text/x-handlebars-template">
{{#grouped_each 4 orderData}}
<div class="row">
    {{#each this }}
    <div class="col-md-3">
        <div class="thumbnail">
            <div class="caption">
                <p><b>Key {{@key}}:</b> {{name}}</p>
            </div>
        </div>
    </div>
    {{/each}}
</div>
{{/grouped_each}}
</script>

<div id="rendered"></div>

关于loops - Handlebars : Get index of an item when there are two rows of items，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/31727016/