Aurelia wybrać wartość początkowa

Question

Mam następujący kod:

javascript:

export class App { 
    values = [ 
    {id: 0, text:'Text 1'}, 
    {id: 1, text:'Text 2'}, 
    {id: 2, text:'Text 3'} 
    ]; 

    obj = { 
    selected: 2 
    }; 
} 

html:

<template> 
    <select value.bind="obj.selected"> 
    <option repeat.for="option of values" value="${option.id}">${option.text}</option> 
    </select> 
</template> 

Problem polega na tym, że początkowa wartość select nie jest opcja thirth zgodnie z oczekiwaniami.

Co muszę zrobić, aby działało poprawnie?

Plunk example

Answer 1

Obiekt id jest liczbą typu więc będziemy chcieli, aby upewnić się, że „wartość” każdy element opcja jest również od liczby typu. Oznacza to, że nie chcesz używać wiązania interpolacji ciągów znaków (np. ${...}), ponieważ zawsze konwertują wartość źródłową na ciąg znaków. Nie będziesz także chciał używać atrybutu elementu opcji value do przechowywania wartości, ponieważ ten atrybut akceptuje tylko ciągi. Zamiast tego należy użyć właściwości model, która jest specjalną własnością systemu wiążącego aurelia i może przechowywać dowolny typ. Tego rodzaju scenariusze omówiono w dokumentach here.

tldr: zmienić elementu opcji wiązania się następująco:

<option repeat.for="option of values" model.bind="option.id">${option.text}</option>