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";
  }
}