是否可以让 Aurelia 组件将值反馈回它们的 parents

Question

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

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

我想做的是在我的用户网格中使用这个控件，这样使用它的人只需单击自定义幻灯片按钮即可 enable/disable 用户，但我需要该控件来当它变回它所在的行时输入它的值。

像这样：

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

<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>

但我宁愿不让控件进行调用，或者做任何阻止我在其他地方使用它的事情，例如在可能具有不同 toggle-able 信息项的其他网格上。

我想到了一种基于事件的方法，然后我查看了其中一个用户 table，发现 table 有可能包含超过 500 行，以及 tracking/managing 来自 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 控件，因此无需对其进行双向数据绑定。

但我们可以将其设置为默认双向数据绑定。让我们看看如何做到这一点。我确定您已经在 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 将为您处理双向数据绑定。

是否可以让 Aurelia 组件将值反馈回它们的 parents

Is it possible to have Aurelia components feed values back to their parents

custom-controls

typescript

aurelia