Условно добавить атрибут в опцию выбора с Aurelia

Question

Я просто пытаюсь создать цикл repeat.for, который будет генерировать опции для элемента select в форме в моем приложении. Я хочу добавить атрибут к последней опции моего элемента select, но не могу понять, как его управлять. Код для моих отборных выглядит следующим образом:

<select select class="browser-default" value.bind="maxPlayers"> 
    <option repeat.for="num of numPlayers" value.bind="num">${num}</option> 
</select> 

и numPlayers свойство моего зрения-класса модели только простой массив:

numPlayers = [2, 3, 4]; 

Так что мой вопрос, как я могу добавить выбранный атрибут только к элементу последнего элемента в моем элементе select? Я знаю, что существует логическое значение с именем $ last, которое указывает, является ли я на последнем элементе, но я не могу понять, как правильно его включить. Кажется, что я должен иметь возможность заставить его работать, добавив selected.bind="$last" к элементу option, но это, похоже, не имеет никакого эффекта.

Answer 1

Использовать model.bind на дополнительных элементах. Свойство value объекта HTMLOptionElement принудительно использует все значения для строк.

Вот пример: https://gist.run?id=9bdbf2518dbd1169d8607f712b09d41b

app.html

<template> 
    <select select class="browser-default" value.bind="maxPlayers"> 
    <option repeat.for="num of numPlayers" model.bind="num">${num}</option> 
    </select> 
</template> 

app.js

export class App { 
    numPlayers = [2, 3, 4]; 
    maxPlayers = 4; 
} 

Подробнее о связывании выберите элементы здесь: http://aurelia.io/docs.html#/aurelia/framework/1.0.0-beta.1.1.4/doc/article/cheat-sheet/5

Answer 2

Вам нужно сравнить переменную $last с текущим $index внутри цикла.

<select select class="browser-default" value.bind="maxPlayers"> 
    <option repeat.for="num of numPlayers" value.bind="num" selected.bind="$index === $last">${num}</option> 
</select>