Question

如果你有一个Aurelia应用程序，你有例如。一个＆＃34;语言切换器＆＃34;导航栏中的自定义元素。假设要从数据库调用中获取这些语言并通过promise返回。

我现在实现它的方式是在我的自定义元素的bind（）函数中调用fetch，它返回一个promise，但我的问题是......如果这个数据库请求需要一些几秒钟完成 - 理想情况下，我不希望我的应用程序的其余部分在返回此promise之前运行，因为很多其他元素依赖于语言切换器自定义元素的语言ID。

我需要的是能够保证一旦应用程序到达自定义元素＆＃34;语言切换器＆＃34;，在我的导航栏中，它需要阻止/暂停/等待数据库提取调用返回并且在继续推进申请之前解决它的承诺。

Answer 1

您可以使用路径视图模型的activate()挂钩。例如：

丝网1.js

export class Screen1 {

   activate() {
     //database call
     return myPromise
       .then(result => this.result = result);
   }
}

丝网1.HTML

<template>
   <require from="./language-switcher"></require>

   <language-switcher some-property.bind="result"></language-switcher>
</template>

有关详情，请参阅http://aurelia.io/hub.html#/doc/article/aurelia/framework/latest/cheat-sheet/7

Answer 2

此讨论也可能对该问题有所启发https://github.com/aurelia/framework/issues/367

OP说：“理想情况下，我希望能够为created（）回调实现一个钩子，返回一个Promise，并让Aurelia等待它解决，然后再调用Attached（）回调...” / p>

EisenbergEffect回答：“我们不能在所有组件中都提供此功能。这将是性能的灾难，并且将不再以任何方式映射到Web组件。”

提到了一种解决方法：

import { HttpClient } from 'aurelia-fetch-client';
import { CompositionTransaction } from 'aurelia-framework';

export class YearToDateGauge {
  static inject = [HttpClient, CompositionTransaction];
  constructor(http, compositionTransaction) {
  this.http = http;
  // https://github.com/aurelia/framework/issues/367
  this.compositionTransactionNotifier = compositionTransaction.enlist();
}

created() {
  // retrieve the data
  this.http.fetch('/books/')
      .then(data => {
          this.books = data; // store locally
          // done loading data, allow the attached() hook to fire
          this.compositionTransactionNotifier.done();
      return data;
  });
}

// fires only after `compositionTransactionNotifier.done()` is called
attached() {
// update the DOM here, e.g. draw a chart, etc
this.numBooks = this.books.length; // the user is guaranteed that    
  this.books will be availaible
}
}

在执行继续之前，Aurelia可能会等待自定义元素中的promise完成吗？

2 个答案: