Aurelia for.repeat wait spinner

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's eventAggregator, чтобы сообщить о событиях, чтобы начать и остановить счетчик. Однако первый из них проще.

Answer 2

Я создал для вас Gist, основанный на ответе @LStarky, который показывает, как работает Spinner.

Я думаю, ваша проблема в том, что ваши данные доступны напрямую и, следовательно, прядильщик немедленно исчезает. В моем примере данные загружаются из удаленного места. За это время коки показаны:

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(); 
    }); 
} 

Self-Разъяснения Запуск Пример 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. Фактический рендеринг страницы теперь должен быть немедленным, по сравнению с попыткой перебора большого списка элементов.