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

Question

所以,我有一个所有用户的列表,它填充了一个选项的选项.

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

我有一个传入的组记录,其中附有一个用户列表.我遵循作弊说明并将其绑定到模型的单个索引.

<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)通过选择测试平等(二),我在一些扩展(可能是过滤器？)已经定义搜索列表,(c)选择它在列表中并且(d)将该选择传播回记录中,以便记录现在在引用中同步.

我宁愿不回到手动执行此操作的触发器,因为在我的应用程序中我会有很多这样的选择.

对于(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;
  ...
}

以下是原始答案(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);
  }
}

这是一个吸烟者: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>

请关注此问题,以获取有关此方案的本机框架支持的更新.