22

ハンドルバーで、のコレクションがあるとしnamesます。どのようにできるのか

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

ファーストネームは{{position}}1、セカンドネームは2などです。コレクションのキーとして位置を絶対に保存する必要がありますか？

4

8 に答える 8

39

これは、組み込みの Handlebars @index 表記で行うことができます。

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

@index は、指定された配列内の各項目の (ゼロベースの) インデックスを提供します。

Razor ビュー エンジンでハンドルバーを使用している場合は、コンパイル エラーを回避するために @@index 表記を使用する必要があることに注意してください。

その他の組み込みヘルパーについては、http: //handlebarsjs.com/ を参照してください。

于 2013-12-16T08:37:49.790 に答える
23 
Handlebars.registerHelper("counter", function (index){
    return index + 1;
});

使用法：

{{#each names}}
    {{counter @index}}
    {{name}}
{{/each}}
于 2015-01-26T21:28:13.537 に答える
4

ネイティブのハンドルバー ヘルパーではこれを行うことはできませんが、独自のハンドルバー ヘルパーを作成することはできます。を呼び出し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 で文書化されていますが、使用方法を理解するのに少し苦労しました。挑戦していただきありがとうございます。お役に立てば幸いです。

于 2013-03-13T03:11:29.740 に答える
2

これが私の好ましい解決策です。コンテキストを拡張して位置プロパティを自動的に含めるヘルパーを登録します。次に、#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/から適応

于 2014-05-30T16:04:32.883 に答える
2

{{@index}}を使用する必要があるだけです

例：

{{#.}}
<li class="order{{@index}}"> counter: {{@index}}</li>
{{/.}}
于 2014-01-25T01:06:16.823 に答える
0

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

{{#each list}}
    @index
{{/each}}
于 2016-12-15T10:31:55.070 に答える
0

これは私のために働く

{{#each posts}}
    <tr>               
       <td>{{@index}} </td>
       <td>{{name}}</td>
    </tr>    
{{/each}}
于 2019-09-19T05:44:57.133 に答える
0

現在の方法、

Handlebars API V2 以降、既に@number 1 から始まるイテレータのインデックスが含まれています。

だから、これはあなたができることです。

{{#foreach names}}
{{@number}}
{{name}}
{{/foreach}}

参考：https ://ghost.org/docs/api/v3/handlebars-themes/helpers/foreach/

于 2020-04-12T08:34:30.300 に答える