Ember JS besten Weg, um einen Vollbild-Bildschirm laden Knopf drücken

Question

Ich bin neu mit Ember und ich möchte eine Vollbild-Overlay zeigen, wenn ein Benutzer eine Taste "vom Server holen" drückt.

Was ist der beste Weg, dies zu erreichen?

Bietet Ember bereits etwas eingebautes? Oder ist es die einzige Möglichkeit, ein Stück HTML in einer meiner Vorlagen zu haben, um es anzuzeigen/auszublenden, wenn das Versprechen, wo ich den AJAX-Anruf mache, zurückkehrt?

Answer 1

Ihnen stehen einige Optionen zur Verfügung.

Die erste betrifft eine Routenänderung. Herkömmlicherweise, wenn der Benutzer eine Taste drückt, die zu einer anderen Route übergeht, a separate route can be created to handle this in-between loading experience.

dies kurz beschreiben, wenn Sie eine Route foo, die Schaffung eines Geschwister Route namens foo-loading mit einer zugehörigen Vorlage mit dem Namen haben, wird eine „foo-loading“ Seite Zustand zeigen, während die Dinge geholt werden, und es dann einmal Dinge entlassen sind gut.

Alternativ könnte, wie Sie bereits angedeutet haben, ein Ladedienst nützlich sein, wenn der Handlungsaufruf für einen Benutzer ein aktuelles Ergebnis auf derselben Route vorsieht. In Ihrer Anwendungsvorlage könnten Sie ein Lade-Div haben, das standardmäßig ausgeblendet ist. Bevor Sie eine AJAX-Anfrage starten, können Sie den Ladezustand aktivieren und das Lade-Div anzeigen. Sobald der AJAX-Anruf beendet ist, kann der Block finally einen Anruf enthalten, um das Lade-Div zu verbergen.

Dieser letztere Ansatz würde einen bedingt geladenen Block in der primären Anwendungsvorlage, eine Ladedienstbehandlung, die ein- und ausblenden, und eine Ladevorlage umfassen.

Answer 2

Sie könnten ember-modal-dialog verwenden, um eine Ladebildschirmkomponente zu erstellen, die gerendert wird, wenn Sie auf Ihre Ajax-Anfrage warten.

Zum Beispiel:

// view.js 
showLoadingScreen: true 

// view.html 
{{#if showLoadingScreen}} 
    {{loading-screen}} 
{{/if}} 

// loading-screen.html 
{{#ember-modal-dialog}} 
    <div class="loader-full-screen-class"></div> 
{{/modal-dialog}} 

Der Vorteil der Komponente/ember-modal-Dialog ist, dass sich dieses Muster in der Regel als modaler implementiert ist, und diese Bibliothek ist der Standard in ember. Die Komponente ermöglicht es Ihnen dann, sie überall dort einzusetzen, wo Sie sie benötigen.