将 select 绑定到 Aurelia 中的对象数组并匹配 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'
}

但是当加载组并将其绑定到视图时，未从 select 中选择正确的用户。实际上，我希望这是因为 JavaScript 会寻找引用平等。

理想情况下，我希望 Aurelia 发现传入记录如上所述，并且 (a) 搜索我在某个扩展中定义的选项列表来测试相等性 (b)（也许是过滤器？），(c) select 它在列表中，并且 (d) 将 selection 传播回记录中，以便记录现在引用同步。

我宁愿不退回到手动执行此操作的触发器，因为在我的应用程序中我将有很多这样的 selects。

我会接受 (a) 和 (c)，尽管很遗憾。

Answer 1

指定一个matcher函数（相等比较器）：

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

以下为原答案（11/30/2015 发布前）...

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

这是一个笨蛋：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 以了解本机框架对此场景的支持更新。

将 select 绑定到 Aurelia 中的对象数组并匹配 ID

Binding a select to an array of objects in Aurelia and matching on ID

javascript

aurelia