私は Aurelia がどのように機能するかを学んでおり、単純なカスタム属性を機能させようとしています。何らかの値の変化に応じて div テキストの色を変更するだけです。
私は持っているdivを持っています:
high.bind="changeColor"
そして私の属性には次のものがあります:
import {inject, customAttribute} from 'aurelia-framework';
@customAttribute('high')
@inject(Element)
export class High {
constructor(element) {
this.element = element;
}
valueChanged(newValue){
console.log(newValue);
if (newValue) {
this.element.classList.remove('highlight-yellow');
} else {
this.element.classList.add('highlight-blue');
}
}
私のビューモデルには次のものがあります:
import {high} from './highlightattribute'
export class Welcome{
heading = 'Welcome to the Aurelia Navigation App!';
firstName = 'John';
lastName = 'Doe';
get fullName(){
return `${this.firstName} ${this.lastName}`;
}
get changeColor(){
if (this.firstName == 'John'){
return false;
}
return true;
}
welcome(){
alert(`Welcome, ${this.fullName}!`);
}
}
firstname を変更すると、高位のカスタム属性クラスで valueChanged イベントがトリガーされません。