Custom attribute in aurelia not working?

Question

I am learning how Aurelia works and I am trying to get a simple user attribute. All he will do is change the color of the div text depending on the change in value.

I have a div that has:

high.bind="changeColor" 

and in my attribute I:

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

In my opinion, I have a model:

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

When I change the first name, I don't see how the valueChanged event is fired in the high user attribute class.

Answer 1

It looks like you are importing high code into your view model, and not into your view. Remove this line in the ViewModel:

 import {high} from './highlightattribute' 

Then add this line to your view:

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

Then in the highlightattribute.js file you remove highlight-yellow and add highlight-blue , so you probably want to add and remove the same class. I also noticed that your highlightattribute.js file you posted does not have a missing bracket, but it was probably just missing when copying the code.

Let me know if this helps solve the problems. I clicked a sample with the code: https://github.com/AshleyGrant/skeleton-navigation/tree/so-answer-20150416-01/src