javascript - 将选择绑定(bind)到 Aurelia 中的对象数组并匹配 ID

Question

所以，我有一个所有用户的列表，它填充了一个选择的选项。

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

我有一个传入的组记录，其中附加了一个用户列表。我关注cheat sheat指令并将其绑定(bind)到模型的单个索引。

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

但是当组被加载并绑定(bind)到 View 时，没有从选择中选择正确的用户。实际上，我希望这是因为 JavaScript 会寻找引用相等性。

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

我宁愿不回退到手动执行此操作的触发器，因为我将在整个应用程序中进行大量此类选择。

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

Answer 1

指定一个匹配器函数(相等比较器):

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

---

以下是原始答案(2015 年 11 月 30 日之前发布)...

在 aurelia 的选择绑定(bind)原生支持之前，我会尝试这样的事情:

<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有关此场景的 native 框架支持的更新。