加载customElements时从activate（）返回Promise [英] Return Promise from activate() when customElements have loaded

问题描述

我知道Aurelia允许我们从VM的 activate（）方法返回 Promise（），以及如果是这样，它将等待承诺解决，然后切换到新视图。

I know that Aurelia allows us to return a Promise() from the VM's activate() method, and if so it'll wait for the promise to resolve before switching to the new view.

但是，假设我有一个包含一个或多个子组件的视图所有人都发出HTTP请求，我如何知道所有孩子何时从我的父组件中完成？

But, say I have a view that consists of one or several child components and they all make HTTP requests, how can I know when all children are finished from within my parent component?

奖金问题：只有进入<$的VM是否正确？ c $ c>< router-outlet> 使用 activate（）方法，而用作自定义元素的VM使用 attach（）方法？

Bonus question: Is it correct that only VM's that go in the <router-outlet> utilize the activate() method, whereas VM's that are used as custom elements utilize the attached() method?

编辑：详细说明一下，这是我的一个页面/路线/主要视图可能看起来的样子喜欢：

To elaborate a little, here's what one of my pages/routes/main views might look like:

<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} 在主视图的激活方法中加载然后解析promise，但这并不能保证中的三个子元素放在一边已加载。这使得它们一个接一个地弹出，看起来不太好。

I can easily wait for ${item} to load and then resolve the promise in the main view's activate method, but that doesn't guarantee that the three child elements in the aside have loaded. This makes them pop up one after the other and it doesn't look great.

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

I'd very much like to use Aurelia's built in functionality if at all possible, but I guess I might have to resort to my own loader using the EventAggregator or a two-way binding like Ashley suggested.

很想听到Aurelia团队中的某个人是否可以这样做？

Would love to hear from someone on the Aurelia team as to whether this is possible at all?

推荐答案

我不确定这样复杂的链条激活和附加，但您始终可以使用自定义事件。

I'm not sure about such a complex chain with activate and attached, but you can always use Custom Events.

In 激活的父元素：

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

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

And in the custom element you'll need to trigger this event whenever needed:

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

当然，您需要导入Event Aggregator

And, of course, you'll need to import Event Aggregator

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

并将其注入子元素和父元素。

And inject it into both child and parent elements.

这篇关于加载customElements时从activate（）返回Promise的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！