是否有可能将Aurelia组件的价值反馈给父母

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在上面的示例代码,这会告诉奥里利亚这些绑定必须是双向的.这将实现你想要的,但总是必须这样做会很烦人:

 <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将为您处理双向数据绑定.