Руль: Получить индекс элемента, если есть два ряда элементов

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

Ответ 1

Используйте объект с объявленными ключами внутри частичного

В вашем частичном определении вместо того, чтобы толкать элементы вслепую в массив, чьи ключи/индексы получают reset каждые четыре итерации, используйте вместо этого объект, ключи которого вы можете последовательно объявлять через несколько итераций.

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>

Ответ 2

Вот как я достиг этого через css, а не с ручками

 .row [class*="col-md-4"]:nth-of-type(3n+1) {
    clear:left;
  }
  .row [class*="col-md-4"]:nth-of-type(n+3) {
    margin-bottom: 10px;
  }