Question

我正在使用Aurelia创建一个应用程序，在该应用程序的一部分中，我有一个列出用户的网格，特别是用户活动状态。

为了允许编辑活动状态，我创建了一个滑动按钮控件（类似于在iOS中看到的那样），其中向左滑动为真，右侧为false。

我想要做的是在我的用户网格中使用此控件，以便使用它的人只需单击自定义幻灯片按钮即可启用/禁用用户，但我需要该控件来提供它的值它会变回它放入的行。

这样的事情：

想象一下，我的表看起来像这样

<table>
  <thead> 
    <tr>
      <th>ID</th>
      <th>Name</th>
      <th>Email</th>
      <th>Is Active?</th>
    </tr>
  </thead>
  <tbody>
    <tr repeat.for="user of userList">
      <td>${user.id}</td>
      <td>${user.name}</td>
      <td>${user.email}</td>
      <td><slidebutton active="${user.active}"></slidebutton></td>
    </tr>
  </tbody>
</table>

这非常有效，因此幻灯片按钮会根据用户的活动状态设置为默认值。

然而，当滑动按钮被更改时，我希望以某种方式通知行，以便我可以告诉它更新后端并更改状态。

我不反对将用户ID传递给自定义组件EG：

<td><slidebutton active="${user.active}" uid="${user.id}"></slidebutton></td>

但是我宁愿没有控制权来打电话，也没有做任何阻止我在其他地方使用它的事情，例如可能有不同切换信息项的其他网格。

我曾想过以事件为基础的方式，然后我查看了一个用户表，看到有可能有一个超过500行的表，并跟踪/管理来自500个幻灯片按钮的500个事件看起来并不像我特别想做的事情。

如果有一种方法可以将值反映回属性，那么我认为这将是一个很好的开始，但是如果可能的话，我真正喜欢的是自定义控件直接更改底层视图模型尽可能在行上。

Answer 1

您可以轻松设置双向数据绑定。首先，您应该切换到使用.bind语法而不是使用字符串插值来传入值。这是因为使用字符串插值会将您的值转换为字符串，而.bind语法可以保留你传入的任何类型。它也适用于绑定对象等。

 <td><slidebutton active.bind="user.active" uid.bind="user.id"></slidebutton></td>

我们可以在上面的示例代码中将.bind更改为.two-way，这将告诉Aurelia这些绑定需要是双向的。这将完成你想要的，但总是必须这样做会很烦人：

 <td><slidebutton active.two-way="user.active" uid.bind="user.id"></slidebutton></td>

请注意，我只将active属性设置为双向数据绑定，因为我猜测uid控件内的slidebutton属性未被更改，因此不需要对其进行双向数据绑定。

但我们可以将其设置为默认为双向数据绑定。我们来看看如何做到这一点。我确定您已在active自定义元素中为uid和slidebutton创建了可绑定属性。我打赌他们看起来像这样（在ESNext中）：

 @bindable active;
 @bindable uid;

如果我们为这些添加一些配置，我们可以将这些属性设置为默认为双向数据绑定，然后您将获得默认搜索的双向数据绑定。

 @bindable({ defaultBindingMode: bindingMode.twoWay }) active;
 @bindable uid;

请注意，我使用上面的bindingMode.twoWay。您需要从aurelia-framework模块导入此枚举。因此，您可能会在slidebutton的视图模型文件顶部显示以下内容：

 import {bindable, bindingMode} from 'aurelia-framework';

完成此操作后，您可以返回使用active.bind="user.active"，Aurelia将为您处理双向数据绑定。

是否可以让Aurelia组件将值反馈给父母

1 个答案: