Aurelia 在另一个 class 中更新绑定项的值

Question

我想问题归结为如何将属性的实例传递给另一个 class。

我有这样的东西：

import timerClass from "./timer";

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

    activate() {
    }
}

和

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

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

Time 传入但更新时未反映在视图中。

在淘汰赛中这很容易，因为所有可观察值都是函数，我可以到处传递它。我将如何在这里做同样的事情，我是否也应该将它包装在一个函数中？

Answer 1

当你打电话时

new timerClass(this.timeLeft);

你按值传递你的变量，即计时器刚好达到 6 并且没有办法在那里修改它。解决此问题的最简单方法确实是传递回调函数。我用下面的代码让它工作。

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

所以我做了更多阅读并发现了 aurelia-event-aggregator http://aurelia.io/docs#the-event-aggregator

这让我可以尝试不同的角度。由于我的计时器最终将成为一个游戏循环，因此这种 pub/sub 的实现方式将非常有效。

我对语法还很陌生，所以我想它做的事情并不完全 "best practice" 但希望它能帮助别人。

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>

Aurelia 在另一个 class 中更新绑定项的值

Aurelia update value of bound item in another class

ecmascript-6

aurelia

main.js

timer.js

main.html