Change view properties EventAggregator Aurelia

Question

import {inject, bindable, customElement} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';

@customElement('add-company-modal')
@inject(EventAggregator)
export class AddCompanyModal {
    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
    }

    attached() {
        console.log('attached add company modal');

        this.eventAggregator.subscribe('add-company-modal-toggle', open => {
            console.log('getting hit');
            if (open) this.open();
            else this.close();
        });
    }

    open() {
        this.activate = true;
    }

    close() {
        this.activate = false;
    }
}

Am I doing this correctly? Basically I have another view model which is publishing events. the console log is getting read out. The idea is that activate is bound to a class:

<div class="modal-backdrop ${activate ? 'modal-show' : ''}" click.trigger="close()">
    <div class="modal">
        <div class="modal-title">
            <h1>Add Company <span class="modal-close">x</span></h1>    
        </div>
        <div class="modal-body modal-no-footer">
            <add-company>

            </add-company>             
        </div>
    </div>
</div>

This is wrapped in a template. However, this doesn't show at all. It works if I have a bindable property, but only when you click open on the other vm. When you close the modal you can't reopen it again, hence why I am using the event aggregator.

So the console.log is getting hit, I know that I have set up the event aggregation correctly, I just have a feeling that the framework isn't picking this up. I know if this was angular then it could be outside the digest cycle but I know aurelia doesn't work like that.

Reproduction

I've created a small repo to reproduce the issues on my Github

PW Kad PW Kad · Accepted Answer · 2016-02-14T23:29:56

activate might sound better as activated or isActivated.

Just FYI there is a life-cycle method the router will call that is named activate so just trying to let you know of that possible collision.

If that doesn't help the next step for me would be to log the value of open inside the subscribe event. I would also verify that it's not failing with a method undefined error or anything.

Last, I personally like to define the properties either on the class or in the constructor. It's possible that you are binding to undefined so it doesn't catch the value change.

export class AddCompanyModal {
    isActivated = false;
    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
    }

    attached() {
        console.log('attached add company modal');
        this.eventAggregator.subscribe('add-company-modal-toggle', open => {
            console.log('getting hit');
            if (open) this.open();
            else this.close();
        });
    }

    open() {
        this.isActivated = true;
    }

    close() {
        this.isActivated = false;
    }
}

Change view properties EventAggregator Aurelia

Reproduction

2 Answers