Aurelia repeat.forで条件付きでCSSクラスを追加または削除するにはどうすればよいですか？

Question

私は<select>を構築していて、CSSを使ってfirstアイテムを無効にしたいと思っていますが、構文を正しく理解することはできません。

は、ここで私が持っているものです。

<select select2 value.bind="selectedItem"> 
    <option repeat.for="item of stuff" model.bind="item" class="${${first} ? 'disabled selected hidden' : ''"> 
     ${item.key} 
    </option> 
</select> 

HEREのテストベッドとして使用することができる十分に類似しPlunker。

私には何が欠けていますか？

Answer 1

あなたの例がいっぱいではありませんが、私はそれがどのように見える必要がありますね：あなたはVMでfirst性質を持っている場合、stuffのようにあなたが書いまた

class="${item.first ? 'disabled selected hidden' : ''}" 

：

class="${$parent.first == item? 'disabled selected hidden' : ''}" 

UPDATE：

プランカ（http://plnkr.co/edit/2xywp0）

<option repeat.for="thing of things" model.bind="thing">${thing.name} ${$first | stringify}</option> 

あなたはちょうどここに間違った構文を持っている：class="${${first} ? 'disabled selected hidden' : ''"はオーレリアドキュメントからclass="${ $first ? 'disabled selected hidden' : '' }"

を次のようになります。

Contextual items availabe inside a repeat template: 

$index - The index of the item in the array. 
$first - True if the item is the first item in the array. 
$last - True if the item is the last item in the array. 
$even - True if the item has an even numbered index. 
$odd - True if the item has an odd numbered index. 

私は `Plunker`追加した:-(私は怖い動作しませんでした