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 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訂閱財產改變了事件與實施方法與命名約定：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"; 
    } 
}