Question

我有一个非常简单的测试用例，我得到一个大的Json条目列表，说2000项。我只是想在一个页面上显示所有这些项目。（忘记这是否是一个好的设计）。

我在index.html中指定了一个标准微调器，它在加载页面和更改页面时显示。但是，在for.repeat循环完成之前，微调器停止并显示页面。

处理此问题的最佳方法是什么。我试图为for.repeat添加一个新的微调器页面，但似乎没有办法知道循环何时完成。我尝试过使用TaskQueue但没有成功。我可以使用setTimeout作为一个肮脏的黑客，但我想知道处理这种事情的正确方法。

由于

Answer 1

我很确定这会奏效：

export class LongDataList {

  constructor() {
    // start the spinner
    this.bindingSpinner = 1;
  }

  attached() {
    // stop the spinner
    this.bindingSpinner = 0;
  }

}

在你的模板中，有这样的东西：

<template>

  <!-- spinner -->
  <span if.bind="bindingSpinner">
    <i class="fa fa-spinner fa-spin fa-lg"></i>
  </span>

  <!-- List of records -->
  <table>
    <thead>
      <tr>
        <th>Username</th>
        <th>Password</th>
        <th>First name</th>
        <th>Last name</th>
      </tr>
    </thead>
    <tbody>
      <tr repeat.for="record of records">
        <td>${record.user_username}</td>
        <td>${record.user_password}</td>
        <td>${record.p_fname}</td>
        <td>${record.p_lname}</td>
      </tr>
    </tbody>
  </table>

</template>

最后，如果您希望微调器出现在不同的模块中，您可以从父组件绑定该属性：

<long-data-list binding-spinner.bind="parent-binding-spinner"></long-data-list>

或者您可以使用Aurelia的eventAggregator来传达事件以启动和停止微调器。然而，第一个更简单。

Answer 2

我根据@LStarky的答案为你创建了一个Gist，它展示了微调器的工作原理。

我猜您的问题是，您的数据是直接可用的，因此，微调器立即消失。在我的示例中，数据是从远程位置加载的。在此期间，显示了微调器：

https://gist.run/?id=75d5ba1e321a918ee16366f7c2c4d0f2

这是重点：

export class App {
  bindingSpinner = 1;
  data = [];

  attached() {
    this.bindingSpinner = 1;
    fetch('https://jsonplaceholder.typicode.com/photos').then(response => {
      // stop the spinner
       return response.json()
    }).then(data => {
      this.data = data;
      this.bindingSpinner = 0;
    });
  }
}

Answer 3

您必须使用activate()生命周期挂钩。如果您在activate()中返回承诺，则只有在处理完成后才会显示该页面。例如：

activate() {
  return new Promise((res, rej) => {
    this.items = 50000;
    res();
  });
}

自我解释的运行示例https://gist.run/?id=eb239baf7255bfe1c613be1dbbe44939

Answer 4

听起来你的问题可能是列表项的呈现需要太长时间。使用这样的很长的列表时，您可以使用aurelia-ui-virtualization包来从虚拟化中受益。

通过JSPM

安装软件包

jspm install aurelia-ui-virtualization

加载包裹：

aurelia.use
  .standardConfiguration()
  .plugin('aurelia-ui-virtualization');

并简单地将repeat.for绑定替换为virtual-repeat.for。与尝试迭代大量项目时相比，页面的实际呈现现在应该是立即的。

Aurelia for.repeat等待微调

4 个答案: