web-dev-qa-db-ja.com

Handlebars.jsを使用して基本的な「for」ループを反復処理する

私はHandlebars.jsを初めて使い、使い始めたばかりです。ほとんどの例は、オブジェクトの反復に基づいています。基本的なforループでハンドルバーを使用する方法を知りたかった。

例。

for(i=0 ; i<100 ; i++) {
   create li's with i as the value
}

どうすればこれを達成できますか？

handlebars.js
73
user1184100

このためにHandlebarsには何もありませんが、独自のヘルパーを簡単に追加できます。

何かをn回実行したい場合：

_Handlebars.registerHelper('times', function(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i)
        accum += block.fn(i);
    return accum;
});
_

そして

_{{#times 10}}
    <span>{{this}}</span>
{{/times}}
_

for(;;)ループ全体が必要な場合は、次のようにします。

_Handlebars.registerHelper('for', function(from, to, incr, block) {
    var accum = '';
    for(var i = from; i < to; i += incr)
        accum += block.fn(i);
    return accum;
});
_

そして

_{{#for 0 10 2}}
    <span>{{this}}</span>
{{/for}}
_

デモ： http://jsfiddle.net/ambiguous/WNbrL/

166
mu is too short

ここでのトップアンサーは、次を使用することもできますが、最後/最初/インデックスを使用する場合は良いです

Handlebars.registerHelper('times', function(n, block) {
    var accum = '';
    for(var i = 0; i < n; ++i) {
        block.data.index = i;
        block.data.first = i === 0;
        block.data.last = i === (n - 1);
        accum += block.fn(this);
    }
    return accum;
});

そして

{{#times 10}}
    <span> {{@first}} {{@index}} {{@last}}</span>
{{/times}}
15
Mike Mellor

CoffeeScriptが好きなら

Handlebars.registerHelper "times", (n, block) ->
  (block.fn(i) for i in [0...n]).join("")

そして

{{#times 10}}
  <span>{{this}}</span>
{{/times}}
7
Manuel

このスニペットは、nが動的な値として来る場合にelseブロックを処理し、@indexオプションのコンテキスト変数。実行の外部コンテキストも保持します。

/*
* Repeat given markup with given times
* provides @index for the repeated iteraction
*/
Handlebars.registerHelper("repeat", function (times, opts) {
    var out = "";
    var i;
    var data = {};

    if ( times ) {
        for ( i = 0; i < times; i += 1 ) {
            data.index = i;
            out += opts.fn(this, {
                data: data
            });
        }
    } else {

        out = opts.inverse(this);
    }

    return out;
});
5
dmi3y