Question

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

我有这样的事情：

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

这让我尝试了不同的角度。由于我的计时器最终将成为一个游戏循环，这种发布/执行方式将很好地工作。

我的语法仍然很绿，所以我想它不完全做一些事情＆＃34;最佳实践＆＃34;但希望它可以帮助某人。

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更新另一个类中绑定项的值

2 个答案:

main.js

timer.js

main.html中