Aurelia-自定义元素属性绑定解析

Question

我创建了一个具有@bindable属性的自定义元素。 在元素的构造函数中，使用bound属性的值设置另一个属性。 这是自定义元素的代码（文件名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生命周期回调 （或根据实际需要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属性更改事件： 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";
  }
}