5

私は 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 イベントがトリガーされません。

4

1 に答える 1