web-dev-qa-db-ja.com

Handlebarテンプレート内で配列の長さを見つける方法は？

Jsonオブジェクトを使用してレンダリングされるHandlebarsテンプレートがあります。このJSONでは、配列を送信しています。このような：

var json = {
               "array":["abc","def","ghi","jkl"] 
}

ここで、テンプレートでこの配列の長さを検索します。何かのようなもの：

{{#each item}}
   {{ array.length }}
{{/each}}

Handlebarsのドキュメントで見つけることができませんでした。

javascripttemplateshandlebars.js
76
Abhidev

私の悪い...

{{array.length}}は実際にテンプレート内で機能しました。ここに投稿する前にチェック/テストする必要がありました。

163
Abhidev

この場合、各ブロック内からそれぞれの親変数を参照する必要があります。

{{#each array}}
    {{../array.length}}
{{/each}}

「array」という名前の変数は、おそらく同様に問題を混同していると思います。明確にするために、いくつかの異なるJSONを想定してみましょう。

var json = {
    "fruit":["Apple","orange","banana"]
};

したがって、これを行う：

<ul>
    {{#each fruit}}
        <li>{{this}} {{@index}} {{../fruit.length}}</li>
    {{/each}}
</ul>

もたらすだろう：

<ul>
    <li>Apple 0 3</li>
    <li>orange 1 3</li>
    <li>banana 2 3</li>
</ul>
31
Kevin Powell

簡単なヘルパーを定義して処理できます：

Handlebars.registerHelper('get_length', function (obj) {
 return obj.length;
});

次に、テンプレートで使用します。例：

{{get_length some_object}}
2
gesiud

コンテンツを表示するために空のリストをテストしている場合...ハンドルバーを使用するEmber.jsでは、＃eachにelseを使用できます。

{{#each blah as |blah|}}

{{else}}
 //   If array is empty
{{/each}}
1
Epirocks

これを試して：

   {{#each item}}
   {{ json.array.length }}
{{/each}}
0
Amrendra