javascript - 呈现 View 后使用 aurelia 将数据动态添加到页面

Question

我正在尝试使用 aurelia 构建一个网络应用程序，但在呈现页面上的所有内容后，我找不到通过 AJAX 添加数据的方法。场景(简化):

有一个页面，其中的某些部分是由一个组件(比如数据表)动态组成的。 data-table 有一个标题，和 table-rows 来显示数据。数据表应该通过 AJAX 调用动态加载它的数据。我想要的是，在页面呈现后加载数据。

我尝试使用 promises 但它的作用恰恰相反，即 aurelia 在附加 View 之前等待 promise 被解决(Jeremy Danyow 也解释道:“...在这个例子中，Aurelia 将等待由在将 View 绑定(bind)到 View 模型之前激活解析方法。”(在他题为“ES7 async/await with Aurelia”的帖子中)这会导致页面保持停滞状态，直到所有数据都加载完毕。

下面提供了一个简单的代码示例。在这里，如果您导航到此页面，在加载所有数据之前您将看不到任何内容(或者该页面不会附加)。我想要的是加载页面并显示“Table for ...”标题，同时开始在后台加载数据并在加载完成时显示表格本身。以下“模拟”屏幕截图说明了所需的行为。

before the ajax requrest is completed

after the ajax request is completed

此外，表格可能需要根据用户的选择进行更新(可能会加载其他数据并将其添加到表格中)，或者可能需要将其他表格添加到页面中。

我认为所需的行为不匹配任何绑定(bind)/附加/分离等生命周期行为(但可能是错误的)。这可以使用 body.onload(或 jquery 等)的变体来实现，但我想知道这是否可以仅(或大部分)使用 aurelia 来实现。

也许，能够在附加所有内容后加载数据(例如，“附加后”回调)可能会有所帮助。在那种情况下，我会加载所有必要的组件及其已加载的数据(例如，它们的标题)并显示它们。然后，在“postattached”部分，我将开始加载数据。

示例代码:

测试.ts

export class testPage {
  ids: number[] = [1,2,3] // for example 1,2,3; will be dynamically loaded as well
}

测试.html

<template>
  <h1>Test</h1>

  <div repeat.for="id of ids">
    <compose view-model="./components/table" model.bind="id"></compose>
  </div>
</template>

表格.ts

import { Loader } from './loader';

export class table  {
  id: number
  tableData: number[][] = []

  activate(model)  {
    this.id = model
  }

  attached() {
    Loader.LoadData(this.id).then((res)=>{this.tableData = res})
  }
}

表格.html

<template>
  <h2>Table for ${id}</h2>

  <div repeat.for="rows of tableData">${rows}</div>
</template>

加载器.ts

export class Loader {
  static LoadData(tid): Promise<number[][]> { //simple stub to imitate real data loading
    let data: number[][] = []
    switch (tid) {
      case 1:
        data.push([11, 12, 13])
        data.push([14, 15, 16])
        break;
      case 2:
        data.push([21, 22, 23])
        data.push([24, 25, 26])
        break;
      case 3:
        data.push([31, 32, 33])
        data.push([34, 35, 36])
        break;
    }
    this.sleep()

    return new Promise((resolve, reject) => {
      this.sleep()
      resolve(data)
    })
  }

  protected static sleep(): boolean { // just to imitate loading time
    let miliseconds = Math.floor(Math.random() * (3 - 1 + 1) + 1);
    var currentTime = new Date().getTime();
    console.debug("Wait for a sec: " + miliseconds)
    while (currentTime + miliseconds * 1000 >= new Date().getTime()) {
    }
    return true
  }
}

编辑:更正了此处示例中错误的代码

Answer 1

您应该尝试使用 window.timeout 来模拟加载时间。因为 Javascript 是单线程的，所以您的 sleep 函数将阻止线程上的所有其他执行。

这个答案可能有点过头了，但更详细地解释了如何在 javascript 中编写 sleep 函数:What is the JavaScript version of sleep()?