Aurelia 奥雷莉亚。重复等待微调器

我有一个非常简单的测试用例，其中有大量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>

用户名
密码
名字
姓
${record.user\u username}
${record.user_password}
${record.p_fname}
${record.p_lname}

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

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

---

或者，您可以使用Aurelia的

事件聚合器

来传递事件以启动和停止微调器。但是，第一个更简单。

我根据@LStarky的答案为您创建了一个要点，其中显示了微调器的工作原理

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

这是重要的一点：

导出类应用程序{
bindingSpinner=1；
数据=[]；
附（{
this.bindingSpinner=1；
取（'https://jsonplaceholder.typicode.com/photos）。然后（响应=>{
//停止旋转
返回response.json（）
})。然后（数据=>{
这个数据=数据；
this.bindingSpinner=0；
});
}
}

您必须使用

activate（）

生命周期挂钩。如果在

activate（）

中返回承诺，则该页面仅在流程完成时显示。例如：

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

---

自我解释运行示例听起来您的问题可能是列表项的呈现时间过长。当处理像这样很长的列表时，您可能会受益于虚拟化，使用包

通过JSPM安装软件包

jspm install aurelia-ui-virtualization

加载包：

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

---

只需将

repeat.for

绑定替换为

virtual repeat.for

。与尝试遍历大量项目列表时相比，页面的实际呈现现在应该是即时的。

我猜您可以使用此处描述的

isBound

属性：。或者，在构造函数中设置一个变量（

bindSpinner=1；

），然后在

attached（）

生命周期方法（

bindSpinner=0；

）中取消设置。我以前尝试过这种方法。在呈现列表之前调用附加的方法。结果是微调器基本上不显示，因为它几乎立即停止。Ok。将此标记为正确（您是第一个）。事实上，所有的答案都是正确的。我的问题是我接到了一个等待这个的电话；在activate（）方法中，然后我尝试在attached（）中停止微调器。我还得把数据附在附件里。