Binden einer Auswahl an ein Array von Objekten in Aurelia und Abgleich auf ID

Question

So habe ich eine Liste aller Benutzer, die die Optionen einer Auswahl füllt.

<option repeat.for="user of userService.users"> 
    ${user.firstName} ${user.lastName} 
</option> 

Und ich habe einen eingehenden Gruppen-Datensatz, der eine Liste von Benutzern hat, die daran angeschlossen sind. Ich folge den Anweisungen cheat sheat und binde es an einen einzelnen Index des Modells.

<select value.bind="group.users[0]"> 
    <option repeat.for="user of userService.users" model.bind="user"> 
     ${user.firstName} ${user.lastName} 
    </option> 
</select> 

die eingehenden Benutzer in der Gruppe sind also identisch mit einem der Benutzer in der Liste:

{ 
    id: 123, 
    firstName: 'Matt', 
    lastName: 'Davis' 
} 

Aber wenn die Gruppe geladen wird und zu der Ansicht gebunden ist, der richtige Benutzer ist nicht ausgewählt aus der Auswahl. Eigentlich würde ich dies erwarten, da JavaScript nach Referenzgleichheit suchen würde.

Im Idealfall möchte ich, dass Aurelia den eingehenden Datensatz wie oben findet und (a) die Liste der Optionen durchsucht, die Gleichheit testen (b), die ich in einer Erweiterung definiert habe (vielleicht ein Filter?), (c) wähle es in der Liste aus und (d) bringe diese Auswahl zurück in den Datensatz, so dass der Datensatz nun referenziert ist.

Ich würde lieber nicht auf einen Auslöser zurückfallen, der das manuell tut, weil ich viele und viele dieser Arten von Auswahlen in meiner Anwendung haben werde.

Ich würde, wenn auch traurig, für (a) und (c) abrechnen.

Answer 1

Geben Sie eine matcher Funktion (Gleichheitsvergleich):

<select value.bind="group.users[0]" matcher.bind="userComparer"> 
    <option repeat.for="user of userService.users" model.bind="user"> 
    ${user.firstName} ${user.lastName} 
    </option> 
</select> 

export class Foo { 
    ... 
    userComparer = (userA, userB) => userA.id === userB.id; 
    ... 
} 

---

Unten ist der Original Antwort (vor 2015.11.30 Release) ...

Bis dies von aurelias Select-Binding nativ unterstützt wird, würde ich so etwas ausprobieren:

<select value.bind="group.users[0] | userToId:userService.users"> 
    <option repeat.for="user of userService.users" model.bind="user.id"> 
    ${user.firstName} ${user.lastName} 
    </option> 
</select> 

export class UserToIdValueConverter { 
    toView(user, users) { 
    return user ? user.id : null; 
    } 

    fromView(id, users) { 
    return users.find(u => u.id === id); 
    } 
} 

Hier ist ein Plunker: http://plnkr.co/edit/15XHkQ?p=preview

Sie werden wahrscheinlich wollen, dass der Konverter generic machen, so dass Sie es in Ihrer App wiederverwenden können ... vielleicht so etwas wie folgt aus:

export class ToIdValueConverter { 
    toView(obj, idPropertyName, objs) { 
    return obj ? obj[idPropertyName] : null; 
    } 

    fromView(id, idPropertyName, objs) { 
    return objs.find(o => o[idPropertyName] === id); 
    } 
} 

<select value.bind="group.users[0] | toId:'id':userService.users"> 
    <option repeat.for="user of userService.users" model.bind="user.id"> 
    ${user.firstName} ${user.lastName} 
    </option> 
</select> 

Halten Sie ein Auge auf this issue für Updates über native Framework-Unterstützung für dieses Szenario O.