javascript - 加载 customElements 后从 activate() 返回 Promise

我知道 Aurelia 允许我们从 VM 的 Promise() 方法返回一个 activate()，如果是这样，它将在切换到新 View 之前等待 promise 解决。

但是，假设我有一个由一个或多个子组件组成的 View ，并且它们都发出 HTTP 请求，我怎么知道所有子组件何时从我的父组件中完成？

额外问题:只有进入 <router-outlet> 的 VM 才使用 activate() 方法，而用作自定义元素的 VM 使用 attached() 方法是否正确？

编辑:详细说明一下，这是我的页面/路由/主 View 之一可能的样子:

<template>
    <main>

        <section id="item">

            <h1>${item.title}</h1>

            <img src="${item.image}">

            <p>${item.description}</p>

            <ul>
                <li repeat.for="si of item.subItems">
                    ${si.subItem}
                </li>
            </ul>

        </section>

        <aside>

            <author-info></author-info>
            <recent-items limit="3"></recent-items>
            <random-quote></random-quote>

        </aside>

    </main>
</template>

我可以轻松地等待 ${item} 加载，然后在主 View 的 activate 方法中解析 promise，但这并不能保证 aside 中的三个子元素已加载。这使它们一个接一个地弹出，看起来不太好。

如果可能的话，我非常想使用 Aurelia 的内置功能，但我想我可能不得不求助于我自己的加载器，使用 EventAggregator 或像 Ashley 建议的双向绑定(bind)。

想听听 Aurelia 团队的某个人关于这是否可行的意见？

最佳答案

我不确定具有 activate 和 attached 的如此复杂的链，但您始终可以使用自定义事件。

在父元素的 activate 中:

return new Promise((resolve, reject) => {
  var subscription = this.eventAggregator.subscribe('child-element-loaded', e => {
    subscription.dispose();
    resolve();
  });
});

在自定义元素中，您需要在需要时触发此事件:

this.eventAggregator.publish('child-element-loaded');

而且，当然，您需要导入 Event Aggregator

import {EventAggregator} from 'aurelia-event-aggregator';

并将其注入(inject)子元素和父元素。

关于javascript - 加载 customElements 后从 activate() 返回 Promise，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/38332583/