是否有可能让Aurelia组件将值返回给其父母

Question

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

为了允许编辑活动状态，我创建了一个幻灯片按钮控件（类似于在iOS中看到的），其中向左滑动是正确的，而向右滑动是错误的。

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

事情是这样的：

想象我的表看起来像这样

<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财产ISN在slidebutton控件中不会改变，因此不需要对其执行双向数据绑定。

但我们可以将其设置为默认双向数据绑定。让我们看看如何做到这一点。我确定您已在slidebutton自定义元素中为active和uid创建了可绑定属性。我敢打赌，他们看起来像这样（在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大街将处理的两方式数据绑定为您。