web-dev-qa-db-ja.com

ハンドルバーのインデックスでアクセス配列の項目にアクセスするにはどうすればいいですか？

私はハンドルバーテンプレート内の配列内の項目のインデックスを指定しようとしています：

{
  people: [
    {"name":"Yehuda Katz"},
    {"name":"Luke"},
    {"name":"Naomi"}
  ]
}

これを使って：

<ul id="luke_should_be_here">
{{people[1].name}}
</ul>

上記が不可能な場合は、配列内の特定の項目にアクセスできるヘルパーをどのように作成すればよいでしょうか。

javascripthandlebars.js
251
lukemh

これを試して：

<ul id="luke_should_be_here">
{{people.1.name}}
</ul>
382
dhorrigan

次のは、インデックスの前にドットを追加したもので、期待どおりに機能します。ここで、インデックスの後に別のプロパティが続く場合、角括弧はオプションです。

{{people.[1].name}}
{{people.1.name}}

ただし、角括弧は必須にあります。

{{#with people.[1]}}
  {{name}}
{{/with}}

後者の場合、角括弧なしでインデックス番号を使用すると1になります。

Error: Parse error on line ...:
...     {{#with people.1}}                
-----------------------^
Expecting 'ID', got 'INTEGER'

余談ですが、括弧は、（インデックスリテラル構文ではない）実際の識別子（インデックス番号ではない）を参照するために、（無効な） セグメントリテラル構文 にも使用されます。詳細は 有効な識別子とは何ですか？

（YUIのハンドルバーでテスト済み）

2.xxアップデート

これにはgetヘルパーを使用できます。

(get people index)

ただし、インデックスが文字列である必要があるというエラーが発生した場合は、次のようにします。

(get people (concat index ""))
297
Arjan
{{#each array}}
  {{@index}}
{{/each}}
17
FMQB

文書化されていない機能があなたのゲームではない場合、同じことがここで達成できます。

Handlebars.registerHelper('index_of', function(context,ndx) {
  return context[ndx];
});

それからテンプレートで

{{#index_of this 1}}{{/index_of}}

私が手に入れる前に私は上記を書いた

this.[0]

あなた自身のヘルパーを書かずにハンドルバーを使い過ぎた人はいないでしょう。

15
Bret Weinraub

動的変数を使いたい場合

これはうまくいきません。

{{#each obj[key]}}
...
{{/each}}

あなたがする必要があります：

{{#each (lookup obj key)}}
...
{{/each}}

handlebars lookup helper および handlebars subexpressions を参照してください。

8
julesbou

最初/最後を取得したい場合は、これを試してください。

{{#each list}}

    {{#if @first}}
        <div class="active">
    {{else}}
        <div>
    {{/if}}

{{/each}}


{{#each list}}

    {{#if @last}}
        <div class="last-element">
    {{else}}
        <div>
    {{/if}}

{{/each}}
7
user1378423

eachを使用して配列をループしているときに、現在の項目のコンテキストで別の配列にアクセスしたい場合は、次のようにします。

これがデータ例です。

 
 [
 {
 name： 'foo'、
 attr：['boo'、 'Zoo'] 
} 、
 {
 name： 'bar'、
 attr：['far'、 'zar'] 
} 
] ]

これはattr配列の最初の項目を取得するためのハンドルバーです。

 {{＃各プレーヤー}} 
 <p> {{this.name}} </p> 
 
 {{#with this.attr}} 
 <p> {{this。[0]}} </p> 
 {{/ with}} 
 
 {{/ each}}

これは出力します

 <p> foo </p> 
 <p> boo </p> 
 
 <p> bar </p> 
 < p> far </p>
7
Fatih

次の構文は、配列に名前が付けられていない場合にも使用できます（配列だけがテンプレートに渡されます）。

  <ul id="luke_should_be_here">
  {{this.1.name}}
  </ul>
0
José

私の場合は、カスタムヘルパー内の配列にアクセスしたいのですが、

{{#ifCond arr.[@index] "foo" }}

これはうまくいきませんでしたが、@ julesbouが提案した答えはうまくいきました。

作業コード

{{#ifCond (lookup arr @index) "" }}

お役に立てれば！乾杯。

0
Sharukh Mastan