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


270

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

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

これを使用して:

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

上記が不可能な場合、配列内の特定のアイテムにアクセスできるヘルパーをどのように記述すればよいですか?

回答:


409

これを試して:

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

26
これはどこにも文書化されていません!驚くばかり。
lukemh

25
Expecting 'ID'{{user.links.websites.1}}または{{user.links.websites.0}}でエラーが発生します
Olivier Lalonde

131
@OlivierLalonde、私はのようなものを使わなければなりませんでした{{ websites.[0] }}
マット

4
確かに、@ Matt、それは単なる幸運な形式ではなく、文書化された構文の一種です。(私の回答を参照してください。)
Arjan

5
配列の最後の要素はどうですか?
winduptoy 2013年

319

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

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

ただし、以下では角括弧が必要です

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

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

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

余談ですが、括弧は(また)セグメントリテラル構文に使用され、それ以外の場合は無効になる実際の識別子(インデックス番号ではない)を参照します。詳細については、有効な識別子とは何ですか?

(YUIのハンドルバーでテスト済み。)

2.xxアップデート

getこれでヘルパーを使用できます:

(get people index)

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

(get people (concat index ""))

10
これは選択した回答よりも詳細であるため、これが回答になります。インデックスが最後にあるときに角かっこが必要なため、しばらくの間スタックしていました。
modulitos 2015年

これはトリックでした!おかげで...これの上で選択した答えはそうではありませんでした。これを正しいものとしてマークしてください。
MarioAraya 2016

1
{{#with people.1}}解決策は、使用して、私のために働きましたcom.github.jknack:handlebars:4.1.2
Ferran Maylinch


17

ドキュメントに記載されていない機能があなたのゲームでない場合、同じことがここで達成できます:

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

次にテンプレートで

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

私が手に入れる前に私は上記を書きました

this.[0]

独自のヘルパーを作成せずにハンドルバーを使いすぎているとは思えません。



8

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

{{#each list}}

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

{{/each}}


{{#each list}}

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

{{/each}}

7

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

これがサンプルデータです。

[
  {
    名前: 'foo'、
    attr:['boo'、 'zoo']
  }、
  {
    名前: 'bar'、
    attr:['far'、 'zar']
  }
]

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

{{#each player}}
  <p> {{this.name}} </ p>

  {{#with this.attr}}
    <p> {{this。[0]}} </ p>
  {{/ with}}

{{/各}}

これは出力されます

<p> foo </ p>
<p>ブー</ p>

<p>バー</ p>
<p>遠い</ p>

attr配列にオブジェクトごとに異なる数の要素がある場合、それを反復するプロセスは何ですか?例:[{name: 'foo'、attr:['boo'、 'zoo']}、{name: 'bar'、attr:['far'、 'zar'、 'sar]}]そして、どのように配列のすべてのオブジェクトのすべての属性を表示しますか?
パルタロイ2016

私は試しませんでしたが、{{#with this.attr}} thisでは代わりに機能するとthis.[0]
思います

1

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

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

0

私の場合、そのようなカスタムヘルパー内の配列にアクセスしたかったのですが、

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

うまくいきませんでしたが、@ julesbouによって提案された答えはうまくいきました。

作業コード:

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

お役に立てれば!乾杯。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.