Пользовательский атрибут в aurelia не работает?

Question

Я изучаю, как работает 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 запускается в классе высоких пользовательских атрибутов.

Answer 1

Похоже, что вы импортируете высокий код в свою viewmodel, а не в свой вид. Удалить эту строку в ViewModel:

import {high} from './highlightattribute' 

Тогда и добавьте эту строку в Вид:

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

Далее, в highlightattribute.js файле вы удаляете highlight-yellow и добавление highlight-blue, так что вы, вероятно, захотите добавьте и удалите тот же класс. Я также заметил, что в вашем файле highlightattribute.js отсутствует выпадающая скобка, но это было, вероятно, просто пропущено при копировании кода.

Дайте мне знать, если это поможет решить проблемы. Я нажал образец с кодом: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src