Knockout: Chargement de la page en attente de fin d'une requête

Question

Résumé: J'ai un observable contrôlant un élément de page de chargement qui masque tout lors d'une requête longue. La page de chargement ne s'affiche pas même si l'observable est modifiée avant la requête. Mettre un espace réservé setTimeout fonctionne, mais la page semble attendre que la requête s'exécute pour mettre à jour la page.

Édition 3: Je dois mentionner que je le fais dans Node.js.

Edit2: Ce que je veux arriver:

1) l'utilisateur clique sur le bouton.
2) Chargement des couvertures de l'écran.
3) Les calculs exécutés
4) écran de chargement disparaît et table est remplie avec les résultats

Ce qui se passe actuellement:
1) l'utilisateur clique sur le bouton.
2) L'écran se fige pendant 3 à 4 secondes lorsque les calculs sont exécutés.
3) Le tableau est rempli avec les résultats

Explication Nous avons une des requêtes en cours d'exécution couple à long ish sur notre page (dure environ 3-4 secondes), et nous voulons mettre un écran de chargement jusqu'à masquer les commandes et informer les gens que la page est en cours d'exécution.

Voici un extender j'ai écrit (avec l'aide de l'Internet):

ko.bindingHandlers.Loading = { 
init: function (element) { 
    $(element).append("<div id='loading_wrap' class='loader' style='height:100%; width:100%;text-align:center; margin-top: 20%'><img src='./resources/ajax-loader.gif'><br>Loading, please wait.</div>") 
}, 
update: function (element, valueAccessor) { 
    var isLoading = ko.utils.unwrapObservable(valueAccessor()); 
    var $element = $(element); 
    var $children = $element.children(':not(.loader)'); 
    var $loader = $(element).find('.loader'); 

    if (isLoading) { 
     $children.hide(); 
     $loader.show(); 
    } else { 
     $children.show(); 
     $loader.hide(); 

    } 
} 

Je joins le bindingHandler à un div contenant les résultats que je veux me cacher jusqu'à ce qu'ils soient prêts:

<div class="row table__row" data-bind="Loading:isLoading"> 

J'ai défini this.isLoading (true) avant d'exécuter la requête, puis de la redéfinir sur false après la requête. Ce qui suit ne fonctionne pas:

this.load = _ => { 
     var _self = this 
     this.isLoading(true) 
     this.search() 
     this.isLoading(false) 
    } 

Toutefois, si je mets un délai d'attente, la page de chargement s'affiche correctement. J'ai aussi essayé quelques méthodes asynchrones, mais je ne comprends pas très bien cela. Alors, comment faire apparaître la page de chargement avant l'exécution de la requête, puis disparaître une fois la requête terminée? Merci.

Editer: Vous avez des questions sur la recherche. Il ressemble à ceci (nous ne sommes pas en utilisant Ajax)

this.search = async _ => { 
//bunch of filters/calculations on large arrays 
this.results(the results of our large calculations) 
} 

Answer 1

L'utilisation d'un gestionnaire de liaison est pas strictement nécessaire que vous avez des actions que dans une seule direction.

Keep it simple:

this.isLoading.subscribe(function(value) { 
    ... get elements 
    $children.toggle(!value); 
    $loader.show(value); 
}); 

Après votre commentaire, je crois que ce que vous avez besoin est juste de reporter légèrement le long travail de course, après la fileuse de chargement a été montré, quelque chose comme ça:

this.isLoading(true); 
    setTimeout(function() { 
     this.search(); 
     this.isLoading(false); 
    }, 100); 

Voici un article sur la différence entre les promesses et le code asynchrone: https://stackoverflow.com/a/20930199/4845566

BTW, voici les références knock-out fo r extenders et ici pour binding handlers.