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

Question

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

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

额外问题:只有 VM 进入 <router-outlet> 是否正确？利用 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}在主视图的 activate 中加载并解析 promise 方法，但这并不能保证 aside 中的三个子元素已加载。这使得它们一个接一个地弹出，看起来不太好。

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

很想听听 Aurelia 团队中有人说这是否可能？

Answer 1

加载路由的activate()中的所有数据回调

正如 Ashley 在上面的评论中指出的那样，最好的策略是加载父路由中的所有数据并通过绑定(bind)将这些数据推送到自定义元素中。您提到这将导致在包含该元素的每个路由中复制/粘贴代码，但我们可以通过将加载代码移动到服务类并将该类注入(inject)到路由中来解决这个问题。这样，我们可以保持代码干枯，同时保持其简单易读。

我们将通过创建 <random-quote> 来演示自定义元素以及一项将为我们提供随机报价的服务。

randomQuoteCustomElement.ts

export class RandomQuoteCustomElement {
    @bindable quote: IQuote;
}

randomQuoteCustomElement.html

<template>
  <i>${quote.text}</i>
  <strong>${quote.author}</strong>
</template>

randomQuoteService.ts

export class RandomQuoteService {

  getRandomQuote: Promise<IQuote>() {
    return this.http.fetch('api/quote/random')
      .then((response) => response.json()) 
    });
  }
}

接下来，我们将在 View 中包含自定义元素，将服务注入(inject)到我们的 View 模型中，通过服务获取数据，并拥有我们的 activate()方法取决于返回的 promise 。

ma​​in.ts

import { RandomQuoteService} from './randomQuoteService';

@inject(RandomQuoteService)
export class MainViewModel {

  quote: IQuote;

  constructor(quotes: RandomQuoteService) {
    this.quotes = quotes;
  }

  activate() {
    return Promise.all([
      this.quotes.getRandomQuote()
        .then((quote) => this.quote = quote)
    ]);
  }
}

ma​​in.html

<template>
  <require from="./randomQuoteCustomElement"></require>
  <random-quote quote.bind="quote"></random-quote>
</template>

因为我们想要我们的 activate()函数强烈依赖于 RandomQuoteService 的结果，我们需要将此代码直接包含在我们的activate()中打回来。我们还可以设计自定义元素以允许绑定(bind)数据，但回退到获取自己的数据，利用相同的服务。

randomQuoteCustomElement.ts

export class RandomQuoteCustomElement {

  @bindable quote;

  constructor(quotes) {
    if (!this.quote) {
      quotes.getRandomQuote()
        .then((quote) => !this.quote && this.quote = quote);
    }
  }
}

这是一个工作示例:https://gist.run/?id=c5570192afe5631355efe6b5da3e44b5