Aureliaでオブジェクトの配列にselectをバインドし、IDで一致させる

Question

したがって、selectのオプションを設定するすべてのユーザーのリストがあります。

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

また、受信したグループレコードには、ユーザーリストが添付されています。私はcheat sheatの指示に従い、モデルの単一のインデックスにバインドします。

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

ので、グループ内の着信ユーザがリスト内のユーザーのものと同一である：

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

しかし、グループがロードされ、ビューにバインドされたときに、正しいユーザーではありません選択から選択します。実際には、JavaScriptが参照平等を求めているので、これを期待しています。

理想的には、Aureliaは受信レコードが上記と同じであることを知りたいと思います。（a）いくつかの拡張子（フィルターかもしれません）で定義した等価性（b） （c）リスト内でそれを選択し、（d）その選択をレコードに戻して、そのレコードが今やレファレンス的に同期するようにする。

私は、アプリケーション全体でこれらの種類の選択肢がたくさんあるため、手動でこれを行うトリガに陥ることはありません。

（a）と（c）については、悲しいことではありますが、私は解決します。

Answer 1

matcher機能（等値比較）を指定：以下

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

---

<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> 

は（2015年11月30日リリースの前に）元の答えです...

これは、aureliaのselectバインディングによってネイティブにサポートされるまで、私は次のようなものを試してみます：

<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); 
    } 
} 

ここplunkerです：http://plnkr.co/edit/15XHkQ?p=preview

はおそらく、アプリ全体でそれを再利用することができますので、コンバータは一般的なようにしたいよ...多分このような何か：

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> 

this issueこのシーンのネイティブフレームワークのサポートに関する更新情報o。