Aurelia 绑定行为

Aurelia 提供了一种称为“绑定行为”的方法，使开发者可以在数据绑定的同时执行 JavaScript 函数。绑定行为可以帮助我们在数据绑定的过程中处理逻辑、调用 API 以及执行其他操作。

转化器

在介绍绑定行为之前，我们先来看一下转化器。转化器是一种用于改变绑定值的方法。在 Aurelia 中，您可以使用内置的 convertToView 和 convertFromView 方法来自定义转化器。

export class MyCustomConverter {
  // Convert from view to model
  convertFromView(value) {
    return value;
  }

  // Convert from model to view
  convertToView(value) {
    return value;
  }
}

绑定行为

绑定行为通过call委托 JavaScript 函数，并传递要绑定的元素、绑定值以及其他可选参数。

以下是在 Aurelia 中使用绑定行为的示例：

HTML

<button click.delegate="myAction()">Click me</button>

ViewModel

export class MyViewModel {
  myAction() {
    alert('Button clicked!');
  }
}

在上面的示例中，我们将click.delegate绑定到一个名为myAction的函数，该函数将在单击按钮时调用。在绑定行为中，我们需要使用 call () 方法将 JavaScript 函数作为参数传递。

<button click.call="myAction()">Click me</button>

我们还可以使用传递给函数的参数：

<button click.call="myAction('Hello, world!')">Click me</button>

在 ViewModel 中声明函数：

export class MyViewModel {
  myAction(message) {
    alert(message);
  }
}

在上面的示例中，当单击按钮时，将弹出“Hello, world！”的警告框。您还可以使用bind绑定，在绑定行为中传递其他选项。

<input value.bind="name & updateTrigger: 'keyup'" />

在上面的示例中，我们将updateTrigger绑定行为用于监听用户输入。更新触发类型被设置为键盘按键，一个选项可以使用逗号分隔。

总结

绑定行为是一种强大的方法，可以帮助开发者在绑定数据的同时执行逻辑操作。它可以与转化器配合使用，以便在绑定数据时自定义值的转换行为，同时还可以使用 bind 方法传递选项和参数。