Benutzerdefinierte Attribut in Aurelia funktioniert nicht?

Question

Ich lerne, wie Aurelia funktioniert und ich versuche, ein einfaches benutzerdefiniertes Attribut zu erhalten. Alles, was es tun wird, ist die Farbe eines Div-Textes in Abhängigkeit von einem Wert zu ändern.

Ich habe ein div, die hat:

high.bind="changeColor" 

und in meinem Attribut ich habe:

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'); 
    } 
} 

Meiner Ansicht nach Modell ich habe:

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}!`); 
} 
} 

Wenn ich das ändern Vorname Ich sehe nicht, dass das valueChanged-Ereignis in der hohen benutzerdefinierten Attributklasse ausgelöst wird.

Answer 1

Es sieht so aus, als ob Sie den hohen Code in Ihr Ansichtsmodell und nicht in Ihre Ansicht importieren. Entfernen Sie diese Zeile in Ihrem Ansichtsmodell:

import {high} from './highlightattribute' 

Dann und fügen Sie diese Zeile in Aussicht:

<require from="./highlightattribute"></require> 

Als nächstes wurde in der highlightattribute.js Datei highlight-yellow und das Hinzufügen von highlight-blue entfernen, so dass Sie wahrscheinlich werden wollen Hinzufügen und Entfernen der gleichen Klasse. Ich habe auch bemerkt, dass es in Ihrer highlightattribute.js Datei, die Sie gepostet haben, eine fehlende Klammer gibt, die aber wahrscheinlich beim Kopieren des Codes knapp verfehlt wurde.

Lassen Sie mich wissen, ob dies hilft, die Probleme zu lösen. Ich habe eine Probe mit Ihrem Code hierher geschoben: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src