Question

我正致力于将Google地图集成到Aurelia组件中。该组件将使用单向绑定来获取其数据（来自父视图），然后它将在地图上绘制。 Google地图（MapsAPI）和数据（this.statistics）都是异步加载的。

基于this问题，似乎attached方法最适合 - 而且这正是我目前正在使用的方法。但是，从下面的代码中可以看出，我在drawMap和attached中都调用了statisticsChanged。我担心我可能会冒两次调用draw方法的风险（根据首先加载的内容，map-api或我的数据）。

是否有更清洁/更正确的方式来确保加载所有数据？理想情况下，我正在寻找像控制器中找到的activate方法。

constructor(MapsAPI, GeoService) {
    this.mapsApi = MapsAPI;
    this.geoService = GeoService;
}

attached() {
    return this.mapsApi
        .then(mapsApi => this.google = mapsApi)
        .then(() => this.extendGoogleMaps())
        .then(() => {
            this.startPoint = new this.google.LatLng(1,1);
            this.finshPoint = new this.google.LatLng(2,2);
            this.bearing = this.google.geometry.spherical.computeHeading(this.startPoint, this.finshPoint);

            if (this.canDraw()) { 
                this.drawMap(); // I'm a bit worried this might be called twice, see statisticsChanged
            }
        });
}

canDraw() {
    return (this.statistics && this.statistics.length > 0);
}

drawMap() {
    _.forEach(this.statistics, (data) => {
        data.coordinates = this.createCoordinatesForTeam(data);
    });

    this.initMap(this.statistics);
}

statisticsChanged() { // Called twice somehow. 
// First with undefined, second time with actual data
    if (this.canDraw()) {
        this.drawMap();
    }
}

Answer 1

答案是否定的，没有生命周期挂钩可让您等待数据。

在v1中，所有生命周期挂钩都忽略了Promises，即使在您返回的Traceback (most recent call last): File "node.py", line 3, in <module> class Node: File "node.py", line 4, in Node def __init__(self, val: int=0, neighbors: List[Node]=[]): NameError: name 'Node' is not defined中，无论如何，Promise Aurelia都会继续进行处理。

The Route Screen Activation Lifecycle的attached方法确实接受Promises，但是即使如此，我还是不鼓励返回一个，因为它会导致您阻塞直到完成。最好处理异步特性，并在组件中向用户提供尚未准备好的反馈。

网络上可能有一些不错的React文档，它们使您了解如何处理异步数据需求。

基本上，您应该构建自己的组件，以便它可以处理零数据并做正确的事。

然后将您的组件设置为每次它依赖于任何数据更改时都调用activate。

将警卫人员放到drawMap中以停止绘制，直到提供了所有依赖项为止。您的组件应该对数据更改做出反应，而不是按程序进行调用。

正确使用Aurelia组件中的生命周期钩子

1 个答案: