如何在Aurelia repeat.for中有条件地添加或删除CSS类？

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>

这里是个Plunker非常相似,可以用来作为一个试验台.

我错过了什么？

Answer 1

你的例子不完整,但我想它应该是这样的:

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

此外,如果你first在VM 拥有财产,就像stuff你写的:

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

更新:

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.