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

Question

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

Answer 1

在部分中使用带有声明键的对象

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

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>