0

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.

C. Daniel
  • 141
  • 14

1 Answers1

0

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

Community
  • 1
  • 1
valichek
  • 1,186
  • 6
  • 9
  • This is kind of new to me and I've done google searches for a proper explanation of aurelia-event-aggregator and the option you stated of using pub/sub but aside from finding some non-descriptive sites I have no idea what these things are as I am still learning Aurelia. Do you have a site you can point me to with a more definite explanation? – C. Daniel Jan 25 '16 at 16:53
  • try to read articles at http://www.danyow.net/ and http://blog.durandal.io/ also you can get help and search some code examples at https://gitter.im/Aurelia/Discuss – valichek Jan 25 '16 at 17:12
  • also you can create plunker example with aurelia (http://bit.ly/aurelia-plunker) so it will be easier to define the best solution you need – valichek Jan 25 '16 at 17:17
  • You provided a solution yesterday on the aurelia discuss forum for me but I still don't understand. I tried your example on my code. The only difference is that I have folders by feature instead of everything together. I get an unhandled promise rejection Error when I use lines 7 and 9on the "=" sign in your plunker: http://plnkr.co/edit/DuDO87wAsgM9QjtGBb9J?p=preview – C. Daniel Jan 26 '16 at 13:29
  • Can you provide the link to the plunker with exception? – valichek Jan 26 '16 at 17:24
  • Looks like you have assignment statement in the wrong place of the code, some kind of syntax error – valichek Jan 26 '16 at 17:33