Aurelia

Question

我创建了一个带有 @bindable 属性的自定义元素。在元素的构造函数中，使用绑定属性的值设置另一个属性。这是自定义元素的代码（文件名 custom-element.ts）：

import {bindable} from 'aurelia-framework';

export class CustomElement{

  @bindable value: any = null;
  message: any;

  constructor(){
    this.message = this.generateMessage();
  }

  generateMessage(){
    if (this.value != null){
      // logic to generate and return message
    } else {
      return "Someting went wrong";
    }
  }
}

此模型有一个简单的相关视图（文件名custom-element.html）：

<template>
  The value id is: ${value.id}, and the message is: ${message}
</template>

我在别处的视图中使用此元素，其模型可以访问 value 对象：

<require from="resources/custom-element"></require>
<custom-element value.bind="value"></custom-element>

虽然 ${value.id} 正确显示，但 ${message} 始终是 Something went wrong。

什么时候设置value，如何使用它的值设置message？

Answer 1

最初创建自定义元素时会调用构造函数，但数据绑定将在其生命周期的后期发生。

为了访问绑定属性，您需要使用 bind lifecycle callback（或 attached，具体取决于您的实际需要）来设置您的 message:

export class CustomElement{

  @bindable value: any = null;
  message: any;

  bind() {
    this.message = this.generateMessage();
  }

  generateMessage(){
    if (this.value != null){
      // logic to generate and return message
    } else {
      return "Someting went wrong";
    }
  }
}

作为替代解决方案，您可以订阅 value 属性 changed 事件，并使用命名约定实现一个方法：yourPropertyChanged（因此在您的情况下 valueChanged ) 并在那里生成消息：

valueChanged(newValue) {
  this.message = this.generateMessage(newValue);
}

generateMessage(newValue){
  if (newValue != null){
    // logic to generate and return message
  } else {
    return "Someting went wrong";
  }
}

Aurelia - 自定义元素属性绑定分辨率

Aurelia - Custom element property binding resolution

javascript

typescript

Aurelia - 自定义元素 属性 绑定分辨率

Aurelia - Custom element property binding resolution

javascript

typescript

aurelia

Aurelia - 自定义元素属性绑定分辨率