Typescript 有没有可能让Aurelia组件将值反馈给它们的父母

我正在使用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传递给自定义组件，例如：

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

但我不想让控件进行调用，也不想做任何阻止我在其他地方使用它的事情，比如在可能有不同信息项的其他网格上

我想到了一种基于事件的方法，然后我看了看其中一个用户表，发现有可能有一个包含500多行的表，而从500个滑动按钮跟踪/管理500个事件似乎并不是我特别想做的事情

---

如果有一种方法可以将值反映回属性中，那么我认为这将是一个很好的开始，但如果可能的话，我实际上希望自定义控件在可能的情况下直接更改行上的基础视图模型。

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

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

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

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

 @bindable active;
 @bindable uid;

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

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

请注意，我使用的是上面的bindingMode.twoWay。您需要从aurelia框架模块导入此枚举。因此，在slidebutton的视图模型文件的顶部可能有类似于以下内容的内容：

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

---

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

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

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

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

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

 @bindable active;
 @bindable uid;

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

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

请注意，我使用的是上面的bindingMode.twoWay。您需要从aurelia框架模块导入此枚举。因此，在slidebutton的视图模型文件的顶部可能有类似于以下内容的内容：

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

---

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

太棒了，还有一次Ashley您的问题：-让我去玩一下，看看会发生什么。实际上，我目前在另一个组件上的@binding有问题，您的回复可能也对该组件进行了排序-只是想让你知道，我没有忘记这一点。我正在慢慢地恢复。我在我参与的项目上有旁听

---

处理利益相关者认为更重要的不同功能：-好吧，我实现了这个，它工作得非常好。好吧，大家都接受一件事，但我觉得如果你想睁大眼睛的话，这将是一个不同的问题，就所有的装订材料而言，这是一个赢家。哦，作为一个额外的奖励，你在这里得到了一个向上的投票：到。因为这是我另一个问题的答案。干得好，先生/我给我的帽子小费。太棒了，再一次阿什利你的球在那里：-让我去玩，看看会发生什么。实际上，我目前在另一个组件上的@binding有问题，您的回复可能也对该组件进行了排序-只是想让你知道，我没有忘记这一点。我正在慢慢地恢复。我在我所参与的项目中受到了牵制，不得不开发利益相关者认为更重要的不同功能：-好吧，我实现了这个，它工作得非常好。好吧，大家都接受一件事，但我觉得如果你想睁大眼睛的话，这将是一个不同的问题，就所有的装订材料而言，这是一个赢家。哦，作为一个额外的奖励，你在这里得到了一个向上的投票：到。因为这是我另一个问题的答案。干得好，先生/我把帽子顶起来。