Aurelia update value of bound item in another class

Question

I guess the question boils down how to i pass the instance of a property to another class.

I have something like this:

import timerClass from "./timer";

export class App {
    constructor() {
        this.timeLeft = 6; //<--- I want to update this
        new timerClass(this.timeLeft);
    }

    activate() {
    }
}

and

export default class {
    constructor(time) {
        this.initialTime = time;

        setInterval(function () {
            if (--time < 0) {
                time = this.initialTime; //<--- From here
            }
        }, 1000);
    }
}

Time is passed in but not reflected in the view when updated.

In knockout this was easy as all observables are functions an I could pass it round all over the place. How would i do the same here, should I wrap it in a function too?

Answer 1

When you call

new timerClass(this.timeLeft);

you pass your variable by value, i.e. the timer just gets 6 and there is no way to modify it there. The easiest way to fix this is indeed pass the callback function. I made it work with the following code.

timer.js:

export default class {
    constructor(time, callback) {
        this.initialTime = time;
        this.currentTime = time;

        setInterval(() => {
            if (--this.currentTime < 0) {
                this.currentTime = this.initialTime;
            }
            callback(this.currentTime);
        }, 1000);
    }
}

app.js:

constructor(){
    this.timeLeft = 6;
    var timer = new timerClass(this.timeLeft, v => this.timeLeft = v);
}

Answer 2

So I did some more reading and came across the aurelia-event-aggregator http://aurelia.io/docs#the-event-aggregator

This allowed me to try a different angle. As my timer is eventually going to become a game loop this pub/sub way of doing it will work quite nicely.

Im still quite green with the syntax so I imagine its doing some things not entirely "best practice" but hope it helps someone.

---

main.js

import {inject} from 'aurelia-framework';
import {EventAggregator} from 'aurelia-event-aggregator';
import TimerClass from "./timer";

@inject(EventAggregator)
export class Main {
    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
        this.timer = new TimerClass(this.eventAggregator);

        this.eventAggregator.subscribe('gameLoop', currentTime => {
            this.timeLeft = currentTime
        });
    }
    activate() {
        this.timer.start();
    }
}

---

timer.js

export default class Timer {
    constructor(eventAggregator) {
        this.eventAggregator = eventAggregator;
    }

    start(){
        var initalTime = 5;
        var currentTime = initalTime;

        setInterval(() => {
            if (--currentTime < 0) {
                currentTime = initalTime;
            }
            this.eventAggregator.publish('gameLoop', currentTime);
        }, 500);
    }
}

---

main.html

<template>
    <div>
        <h2>Time Left:</h2>
        <div>${timeLeft}</div>
    </div>
</template>