Aurelia 2 propertyChanged

Help Requests
1

I’m trying to write my first app with Aurelia 2 (latest version).

I’m assuming I’ve missed something in the documentation, but I just can’t get propertyChanged to work:

<select id="companies"  value.bind="selectedCompany" >
    <option model.bind="">[Select]</option>
    <option repeat.for="item of companies"  model.bind="item">${item.name}
    </option>
</select>

@observable selectedCompany: ICompany | null = null;
...

public async selectedCompanyChanged(nv: ICompany, ov: ICompany) {
        console.log(nv, ov, this.selectedCompany);
    }

The code above works fine in aurelia 1

2

Seems to work okay for me.
Feel free to update the code I provided, so we can dig deeper into the issue

3

I still can’t get propertyChanged to fire!

I’ve checked the version of aurelia I’m using - aurelia@2.0.0-alpha.23

‘main.ts’ is bare minimum.

Could it be that I’m using EventAggregator elsewhere in the app? To get around the problem of @observable propertyChanged not firing while watching a property in a service, I used EA to manually fire events. I messed around for days, because I was injecting @IEventAggregator ea:IEventAggregator into the ctor of the service. While the rest of the app could subscribe and publish to ea, the events weren’t firing.

After much head-scratching I changed all references in the app from IEventAggregator to EventAggregtor and lo and behold the events all started firing.

import { observable } from "@aurelia/runtime";

export class AdminPage {
    @observable watchMe = "Hello";

  // doesn't fire
    watchMeChanged(val: string) {
        console.log(val);
    }

    btnClick() {
        this.watchMe = "Great - working fine";
    }
}

<button type="button" class="btn btn-secondary" click.delegate="btnClick()">Click me</button>
${watchMe}
1 Like
4

Glad you could fix it.

Feel free to post your “faulty” IEventAggregator approach, so we can see what the real cause was

5

I haven’t fixed the propertyChanged not firing! However the workaround is to add a change.delegate and then subscribe to that.

<select value.bind="myValue" change.delegate="onChange(myValue)">

This is the other problem with EventAggregator that may be related to this =>

This doesn’t work

constructor(@IEventAggregator private ea: IEventAggregator){}
...
this.ea.publish(new EventArgs(myArgs){}

elsewhere

constructor(@IEventAggregator ea: IEventAggregator){
          this.subscriptions.push(ea.subscribe(EventArgs, args=>this.handleMyEvent(args));
}

This does work:

constructor(private ea: EventAggregator){}
...
this.ea.publish(new EventArgs(myArgs){}

elsewhere

constructor(ea: EventAggregator){
          this.subscriptions.push(ea.subscribe(EventArgs, args=>this.handleMyEvent(args));
}