流星（スペースバー）：#withと#eachを一緒に使う方法 - 流星、ハンドルバー、流星、スペースバー

オブジェクトの配列を返すヘルパー関数があり、配列の各オブジェクトにはキーを含むオブジェクトであるキーパブリッシャーがあります。各キーには再びオブジェクトがあります。

 priceData:function(){

var colection=[
{contract:"nn",publishers:{GVM:{ask:1,bid:2},SET:{ask:6,bid:3}}},
{contract:"BB",publishers:{GVM:{ask:11,bid:99},SET:{ask:23,bid:34}}}
]
return colection
}

今、テンプレートでこのように使用しようとしています

<table class="table">
<tbody>
{{#each priceData}}
<tr>
{{#with publishers}}
<td>{{ask}}</td>
<td>{{bid}}</td>
{{/with}}
</tr>
{{/each}}
</tbody>
</table>

このようなエラーが発生するため、＃withを#each反復で使用できますか。そうでない場合、そのようなコレクション情報をテーブルに表示するにはどうすればよいですか？

回答：

回答№1は2

問題はない each そして with、それらを組み合わせて、自由に入れ子にすることができます。心に留めておくべき唯一のことは コンテキスト：各ブロックはコンテキストに深く入りますしかし、同時に外部コンテキストへのアクセスを許可します（個人的にはお勧めしません）。したがって、すべてのタイプミスを削除し、コード全体を次のように使用すると：

<table class="table">
<tbody>
{{#each priceData}}
<tr>
{{#with publishers}}
<td>{{ask}}</td>
<td>{{bid}}</td>
{{/with}}
</tr>
{{/each}}
</tbody>
</table>

その後、すべてがうまくいきます。ただし、データ構造がこのコードに対応していることを確認してください。しかし、そうではありません。

必要なのはアクセスすることです ask そして bid 以内 publishers どちらかを通して GVM または SET。前者が必要なふりをしましょう：

<table class="table">
<tbody>
{{#each priceData}}
<tr>
{{#with publishers}}
<td>{{GVM.ask}}</td>
<td>{{GVM.bid}}</td>
{{/with}}
</tr>
{{/each}}
</tbody>
</table>

---

コード全体を分解して、画像をより明確にします。

あなたが使うとき

{{priceData}}

次に、ヘルパーが返すものにリンクします。

[{
contract: "nn",
publishers: {
GVM: {
ask: 1,
bid: 2
},
SET: {
ask: 6,
bid: 3
}
}
}, {
contract: "BB",
publishers: {
GVM: {
ask: 11,
bid: 99
},
SET: {
ask: 23,
bid: 34
}
}
}]

だからあなたが使うとき

{{#each priceData}}
...
{{/each}}

ヘルパーが返すもののコンテキストに飛び込み、配列の項目を反復処理します。たとえば、最初のものは

{
contract: "nn",
publishers: {
GVM: {
ask: 1,
bid: 2
},
SET: {
ask: 6,
bid: 3
}
}
}

次にすることは

{{#with publishers}}
...
{{/with}}

配列の最初の項目のコンテキストは

GVM: {
ask: 1,
bid: 2
},
SET: {
ask: 6,
bid: 3
}

そして二番目は

GVM: {
ask: 11,
bid: 99
},
SET: {
ask: 23,
bid: 34
}

次に、あなたがしようとしている

{{ask}}

これはあなたのコードが失敗する場所です ask 現在のコンテキスト内の構造のプロパティ。しかし、プロパティがあります GVM そして SET。好きなものを選んで、次のように使用します。

{{GVM.ask}}

それが役に立てば幸い。

---