web-dev-qa-db-ja.com

ハンドルバーのカウンター#each

ハンドルバーで、namesのコレクションがあるとしましょう。

{{#each names}}
{{position}}
{{name}}
{{/each}}

ここで、{{position}}は名の場合は1、名の場合は2などです。コレクション内の位置をキーとして絶対に保存する必要がありますか？

javascripttemplateshandlebars.jstemplate-engine
19
algorithmicCoder

組み込みのHandlebars @index表記を使用してこれを行うことができます。

{{#each array}}
  {{@index}}: {{this}}
{{/each}}

@indexは、指定された配列内の各項目の（ゼロから始まる）インデックスを提供します。

Razorビューエンジンでハンドルバーを使用している場合は、@@ indexという表記を使用して、コンパイルエラーを回避する必要があります。

より多くの組み込みヘルパーについては http://handlebarsjs.com/ を参照してください

34
Smix
Handlebars.registerHelper("counter", function (index){
    return index + 1;
});

使用法：

{{#each names}}
    {{counter @index}}
    {{name}}
{{/each}}
20
serg

ネイティブのハンドルバーヘルパーではこれを行うことはできませんが、独自のヘルパーを作成することはできます。 Handlebars.registerHelper()を呼び出して、照合する名前（位置）の文字列と、現在の位置カウントを返す関数を渡すことができます。 registerHelperを呼び出すクロージャーの位置番号を追跡できます。テンプレートの例で機能するpositionというヘルパーを登録する方法の例を次に示します。

JavaScript：

// Using a self-invoking function just to illustrate the closure
(function() {
    // Start at 1, name this unique to anything in this closure
    var positionCounter = 1;

    Handlebars.registerHelper('position', function() {
        return positionCounter++;
    });

    // Compile/render your template here
    // It will use the helper whenever it seems position
})();

ここに示すのはjsFiddleです： http://jsfiddle.net/willslab/T5uKW/1/

ヘルパーは handlebarsjs.com に文書化されていますが、これを使用する方法を理解するのに少し努力が必要でした。挑戦をありがとう、それが役に立てば幸いです！

4
Will Klein

あなただけが{{@index}}を使用する必要があります

例：

{{#.}}
<li class="order{{@index}}"> counter: {{@index}}</li>
{{/.}}
2
elin3t

これが私の好ましい解決策です。位置プロパティを自動的に含めるようにコンテキストを拡張するヘルパーを登録します。次に、＃eachの代わりに新しいブロックヘルパー（例：#iter）を使用します。

Handlebars.registerHelper('iter', function (context, options) {
    var ret = "";

    for (var i = 0, j = context.length; i < j; i++) {
        ret += options.fn($.extend(context[i], {position: i + 1}));
    }

    return ret;
});

使用法：

{{#iter names}}
    {{position}}
    {{name}}
{{/iter}}

http://rockycode.com/blog/handlebars-loop-index/ から変更

1
oldegreyg

リスト内のインデックスからのみ値を取得できます。

{{#each list}}
    @index
{{/each}}
0
Yatender Singh