Как я могу условно добавить или удалить классы CSS в Aurelia repeat.for?

Question

У меня есть массив вещей, из которых я создаю <select>, и я хочу, чтобы иметь возможность отмечать элемент first как отключенный с помощью CSS, однако я не могу получить синтаксис правильно.

Вот что у меня есть:

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

HERE «s Plunker достаточно похожи, что можно использовать в качестве тест-кровать.

Что мне не хватает?

Answer 1

Ваш пример не является полным, но я предполагаю, что это должно выглядеть следующим образом:

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

Кроме того, если у вас есть first недвижимость в VM, как stuff Вы пишете:

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

UPDATE:

Plunker (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' : '' }"

От Aurelia Документах

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.