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 событие с изменением свойства с использованием метода с соглашением об именах: 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"; 
    } 
}