将选择绑定到Aurelia中的对象数组并在ID上进行匹配 [英] Binding a select to an array of objects in Aurelia and matching on ID

问题描述

因此，我有一个所有用户的列表，其中填充了select的选项.

So, I have a list of all users, which populates the options of a select.

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

我有一个传入的组记录，其中包含一个附加的用户列表.我遵循作弊行为指令并将其绑定到模型的单个索引.

And I have an incoming group record which has a list of users attached to it. I follow the cheat sheat instructions and bind it to a single index of the model.

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

因此，该组中的传入用户与列表中的用户之一相同:

So, the incoming user in the group is identical to one of the users in the list:

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

但是，当组加载并绑定到视图时，未从选择中选择正确的用户.实际上，我希望如此，因为JavaScript会寻找引用相等.

But when the group is loaded and bound to the view, the correct user is not chosen from the select. Actually, I would expect this as JavaScript would look for referential equality.

理想情况下，我希望Aurelia能够找到传入的记录，并且(a)搜索测试相等性的选项列表(b)我在某个扩展名中定义的(可能是过滤器?)， c)在列表中选择它，然后(d)将该选择传播回记录中，以便该记录现在参照同步.

Ideally, I'd like Aurelia to find that the incoming record is as above and (a) search through the list of options testing equality (b) that I've defined in some extension (maybe a filter?), (c) select it in the list and (d) propagate that selection back into the record so that the record is now referentially in sync.

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

I would rather not fall back to a trigger that manually does this because I will have lots and lots of these kinds of selects throughout my application.

我会为(a)和(c)安顿下来，虽然很可悲.

I would settle, albeit sadly, for (a) and (c).

推荐答案

指定 matcher 函数(相等比较器):

Specify a matcher function (equality comparer):

<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绑定本身支持，我会尝试这样的事情:

Until this is supported natively by aurelia's select binding I would try something like this:

<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

您可能希望使转换器具有通用性，以便可以在整个应用程序中重复使用它……也许是这样的:

You'll probably want to make the converter generic so you can reuse it throughout your app... maybe something like this:

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>

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

Keep an eye on this issue for updates on native framework support for this scenario.

这篇关于将选择绑定到Aurelia中的对象数组并在ID上进行匹配的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！