Aurelia for.repeat 等待微调器

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

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

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

谢谢

最佳答案

我很确定这会起作用:

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>

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

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

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

关于Aurelia for.repeat 等待微调器，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41612093/