使用Aurelia，从另一个类更新一个类中的绑定属性

Question

Question: I have two classes and want to update a variable in the View of one class by calling a class from another class. Let me elaborate.

thisClass.js:

import {inject} from "aurelia-framework";
import {OtherClass} from "/otherClass";

@inject(OtherClass)
export class ThisClass {
    constructor(otherClass){
        this.otherClass = otherClass;
    }

    callLoader(){
        this.message = "Hi There!";
        this.otherClass.changeMessage(this.message);
    }
}

otherClass.js:

export class OtherClass {
    constructor(){
        this.oldMessage = "";
    }

    activate(){
        this.oldMessage = "Yo!";
    }

    changeMessage(message){
        this.oldMessage = message;
    }
}

otherClass.html

<template>
    ${oldMessage}
</template>

I know the new message is being brought over because when I do a console.log in changeMessage for the passed in message I can see it but the View isn't updating with the new message. Any help would be greatly appreciated.

Answer 1

When you inject otherClass , aurelia creates a singleton for you, but it is not the one with view created by templating engine.

One of the options for you could be pubsub messaging using aurelia-event-aggregator https://stackoverflow.com/a/32207501/3436921

Also if you have smth like:

<my-component ref="myComp"></my-component>

You can call myComp.au.controller.myCompMethod(), but as for me, it is NOT good pattern, if you need to pass the data it's better to use bindings.

EDITED: Here is example that shows two ways of communication between components, pubsub messaging and function-call handling. http://plnkr.co/edit/DuDO87wAsgM9QjtGBb9J