Question

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

把手模板：

{{#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;
});

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>

Answer 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;
  }

把手：当有两行项

2 个答案:

在部分