L'attributo personalizzato in aurelia non funziona?

Question

Sto imparando come funziona Aurelia e sto cercando di ottenere un semplice attributo personalizzato funzionante. Tutto ciò che farà è cambiare il colore di un testo div a seconda di alcuni cambiamenti di valore.

Ho un div che ha:

high.bind="changeColor" 

e nel mio attributo ho:

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

A mio modello di vista ho:

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

quando cambio la firstname Non vedo l'evento valueChanged innescato nell'alta classe di attributi personalizzati.

Answer 1

Sembra che tu stia importando il codice alto nel tuo viewmodel piuttosto che nella tua vista. Rimuovi questa riga nel ViewModel:

import {high} from './highlightattribute' 

Poi e aggiungere questa linea al vostro Vista:

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

successiva, nel file highlightattribute.js si sta rimuovendo highlight-yellow e aggiungendo highlight-blue, quindi probabilmente si desidera aggiungi e rimuovi la stessa classe. Ho anche notato che c'è una parentesi mancante nel file highlightattribute.js che hai postato, ma che probabilmente è mancato durante la copia del codice.

Fammi sapere se questo aiuta a risolvere i problemi. Ho spinto un esempio con il tuo codice qui: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src