emberjsのハンドルバーforeachループの最初の要素のクラスを設定するには

Question

emberjsアプリケーションで作業しています。私のモデルに基づいてn個のボタンを動的に作成します。これを行うために、テンプレート内のforeachを使用してモデルをループし、モデル内の各要素のボタンを作成します。

{{#each model.zones as |zone|}} 
     <li><a id="{{zone.zone_id}}" {{action 'setData' zone.currenttemp zone.setpoint zone.mode zone.zone_id on='click'}} class="zones">{{zone.zone_name}}: {{zone.currenttemp}}&deg;F</a></li> 
{{/each}} 

各ボタンは「ゾーン」クラスに属していますが、アプリが読み込まれると、最初のボタンのみが「アクティブ」クラスの一部になります。私はemberjsのハンドルバーが@first演算子をサポートしていないことを理解しているので、これについてどうやって行くのか分かりません。

Answer 1

eachブロックはindex変数が付属しています、そしてあなたは、いくつかの他のチェックを持っているしたい場合、あなたはember-truth-helpersアドオンをインストールすることができifインラインヘルパー

{{#each model.zones as |zone index|}} 
     <li><a id="{{zone.zone_id}}" {{action 'setData' zone.currenttemp zone.setpoint zone.mode zone.zone_id on='click'}} class={{if index 'zones' 'active'}}>{{zone.zone_name}}: {{zone.currenttemp}}&deg;F</a></li> 
{{/each}} 

と組み合わせることができます。

class={{if (eq index 0) 'active' 'zones'}}