Question

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

<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）在列表中选择它并（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>

密切关注this issue有关此方案的本机框架支持的更新。

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

1 个答案: