12

以下@keyは常に0 1 2 32行目でも与えます。助けてください。

ハンドルバー テンプレート: 

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

2 に答える 2

0

パーシャル内で宣言されたキーを持つオブジェクトを使用する

部分的な定義では、キー/インデックスが 4 回の反復ごとにリセットされる配列にやみくもにアイテムをプッシュする代わりに、複数の反復にわたって順番にキーを宣言できるオブジェクトを使用します。

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>

于 2015-12-18T17:07:06.253 に答える