Handhabung der Ladeanzeige für mehrere AJAX-Aufrufe in Polymer

Ich verwende Polymer 1.0, um eine Webanwendung zu erstellen.Handhabung der Ladeanzeige für mehrere AJAX-Aufrufe in Polymer

Ich habe verschiedene Elemente, die einen oder mehrere Eisen-Ajax-Aufrufe machen, und ich habe ein anderes Element, um das Laden-Overlay anzuzeigen. Aber in meiner jetzigen Lösung habe ich jedem Element, das Ajax-Aufrufe ausführt, das loading-overlay mit seiner Logik hinzugefügt, um es anzuzeigen oder nicht.

Nun ist meine Frage, was ist der beste Weg, um eine solche Lade-Overlay zu zeigen?

Eine Idee von mir wäre, so etwas wie einen Beobachter in der Ladeüberlagerung zu haben. Jedes Element, das Anfragen ausführt, bindet seine Eigenschaften an den Beobachter. Diese Eigenschaften können in einem Array gespeichert werden und bei jeder Änderung überprüft das loading-overlay, ob mindestens eine loading-Eigenschaft auf "true" gesetzt ist. Wenn eine oder mehrere Eigenschaften wahr sind, wird das Lade-Overlay geöffnet und wenn alle Anfragen fertig geladen sind, wird es geschlossen.

Eine andere Idee war es, Ereignisse zu verwenden, um die Lade-Overlay zu informieren, wenn ein Element lädt beginnt. Aber hier ist das Problem, dass ich mehr als eine Anfrage gleichzeitig habe (Die erste Anfrage schließt das Overlay, aber die Seite ist noch nicht fertig geladen).

Edit:

loading-overlay Das ist ein Element, das IronOverlayBehavior enthält.

<link rel="import" href="../../../bower_components/polymer/polymer.html"> 

<link rel="import" href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html"> 
<link rel="import" href="../../../bower_components/paper-spinner/paper-spinner.html"> 

<dom-module id="loading-overlay"> 
    <template> 
    <paper-spinner active="true"></paper-spinner> 
    </template> 
    <script> 
    Polymer({ 
     is: 'loading-overlay', 
     behaviors: [ 
     Polymer.IronOverlayBehavior 
     ] 
    }); 
    </script> 
</dom-module>

Quelle

2017-07-21 Konrad Grüner

Verwenden Sie eine Eigenschaft zum Laden anstelle von 2 !!

<iron-ajax id='loadA' loading="{{_loading}}" ...></iron-ajax> 
<iron-ajax id='loadB' loading="{{_loading}}" ...></iron-ajax>

bindet Belastungswert zu Laden-Overlay mit einigem Attribute und beim Laden loader wahre Anzeige

ist

<loading-overlay id="loadingOverlay" is-loading="[[_loading]]" with-backdrop></loading-overlay>

so dass jedes Mal, wenn Ajax gemacht wird, dann wird _loading wahr wird so angezeigt loader

Quelle

2017-07-22 08:09:52

Aber was passiert, wenn beide laden und man fertig ist? dann sollte das Overlay verschwinden, aber es wird nicht geladen –

Das ist die Posterfrage, die ich denke: Was passiert, wenn ONE einen anderen Ladezustand hat als der OTHER? – sebastian

Und was soll mit dem 'is-loading' in meiner' loading-overlay' passieren? Vielleicht habe ich verpasst zu sagen, dass das 'loading-overlay' ein eigenes Element ist, das das [IronOverlayBehavior] implementiert (https://www.webcomponents.org/element/PolymerElements/iron-overlay-behavior/behaviors/Polymer.IronOverlayBehavior) . Aber ich denke, dieses Element könnte sich nicht öffnen. –

Ich denke, das Einzige, was du verkürzen kannst, ist der _isXhrLoading-Beobachter.

_isXhrLoading: function() { 
    if(Array.from(arguments).indexOf(true) >= 0) { 
     this.$.loadingOverlay.open() 
    } else { 
     this.$.loadingOverlay.close() 
    } 
    }

Quelle

2017-07-23 14:08:01

Zumindest ein kleiner Vorteil, wenn Sie es auf jedes Element schreiben, wo es verwendet wird. Aber sieht mir sehr mit der 'indexOf (true)' wenn aus der Java-Welt kommen: P –

Checked out, aber nicht möglich. 'arguments' ist kein Array, siehe [MDN] (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments) für weitere Informationen. Aber dies wird funktionieren, wenn Sie es in ein Array konvertieren (auch im obigen Link gezeigt). –

Sie haben Recht, Argumente ist kein Array. –

Handhabung der Ladeanzeige für mehrere AJAX-Aufrufe in Polymer

Antwort

Verwandte Themen