Modello di caricamento dell'argento con fuoco liquido

Question

Ho lavorato molto a questo problema e non riesco a farlo funzionare. Sto cercando di mostrare il mio modello di caricamento in attesa che il mio modello prometta di tornare.

La mia comprensione è, per impostazione predefinita, se ho app/templates/loading.hbs, questo modello verrà visualizzato su tutte le rotte. Tuttavia, anche con quel modello sul posto ogni volta che passo da un percorso all'altro, il vecchio percorso rimane visualizzato fino a quando il modello non ritorna, a quel punto si verifica la transizione del fuoco liquido e sei portato al percorso successivo.

Ho provato varie versioni di creazione di modelli di caricamento nidificati per ogni percorso, ho provato a creare subroutes per ogni percorso per il modello di caricamento e ho persino incasinato i metodi beforeModel/afterModel che sono disponibili ma non sto facendo progressi. Questo è l'ultimo ostacolo che voglio attraversare prima del lancio e sono perplesso sul motivo per cui non riesco a farlo funzionare. Ecco un po 'del mio codice che ritengo rilevante.

Nota: sto utilizzando Ember CLI e Liquid Fire. I miei dati vengono anche restituiti al modello da am Ember Service per il momento.

Router

Router.map(function() { 
    this.route('reviews', function() { 
    this.route('index', {path: '/'}); 
    this.route('review', {path: '/:review_id'}); 
    }); 
    this.route('movies'); 
    this.route('about'); 
}); 

app/template/loading.hbs

<div class="content-container"> 
    <h1>Ish be loading</h1> 
</div> 

più lento del modello del percorso

export default Ember.Route.extend({ 
    activate() { 
     this._super(); 
     $("html,body").animate({scrollTop:0},"fast"); 
     $("body").addClass('movies'); 
    }, 
    deactivate() { 
     $("body").removeClass('movies'); 
    }, 
    model() { 
     const movies = this.get('movies'); 
     return movies.getMoviesInAlphOrder(); 
    }, 
    afterModel: function() { 
     $(document).attr('title', 'Slasher Obscura - Movie Database'); 
    }, 
    movies: Ember.inject.service() 
}); 

app.js

App = Ember.Application.extend({ 
    modulePrefix: config.modulePrefix, 
    podModulePrefix: config.podModulePrefix, 
    Resolver, 
    ... 
}); 
loadInitializers(App, config.modulePrefix); 

metodi di servizio

sortReviewsByDateDesc(arr) { 
     return arr.slice().sort(function (a, b) { 
      return a.review.date > b.review.date ? -1 : 1; 
     }); 
    }, 
    getSetAmountOfMovies(num, arr) { 
     const movieList = arr ? null : this.getMovies(); 
     const trimmedList = arr ? arr.slice(0, num) : movieList.slice(0, num);   
     return trimmedList; 
    }, 
    setFirstReviewToFeatured(arr) { 
     arr[0].isFeatured = true; 
     return arr; 
    }, 
    getLatestReviews(num) { 
     const movieList = this.getMovies(); 
     const reviewList = movieList.filterBy('review'); 
     const indexList = this.sortReviewsByDateDesc(reviewList); 
     const latestList = this.getSetAmountOfMovies(num, indexList); 
     return this.setFirstReviewToFeatured(latestList); 
    }, 
    getMoviesInAlphOrder() { 
     const movieList = this.getMovies(); 
     let lowerCaseA, lowerCaseB; 
     return movieList.sort(function(a, b) { 
      lowerCaseA = a.title.toLocaleLowerCase(); 
      lowerCaseB = b.title.toLocaleLowerCase(); 
      return lowerCaseA.localeCompare(lowerCaseB); 
     }); 
    }, 
getMovies() { 
     return [{ 
      id: 1, 
      title: '303 Fear Faith Revenge', 
      year: "1999", 
      imdb: "tt0219682", 
      youtube: "iFV1qaUWemA" 
     } 
... 
] 

Ho letto la documentazione sul sito di Ember insieme a varie altre risorse di Google e non riesco a capire perché il mio modello di carico non è affatto rendering. Qualsiasi aiuto sarebbe fantastico! Grazie!

Answer 1

Il caricamento dei modelli si attiva quando il gancio del modello restituisce una promessa che richiede molto tempo per essere risolta, tuttavia il gancio del modello non restituisce una promessa.

model() { 
    const movies = this.get('movies'); 

    return movies.getMoviesInAlphOrder(); 
} 

getMoviesInAlphOrder sta tornando una matrice sincrona. Dopo aver parlato ulteriormente con te, si scopre che hai pre-riempito questo lato client dell'array con 540 elementi, quindi il problema qui è che il modello di caricamento non solo non ha una promessa da aspettare, ma anche se lo facesse si risolverebbe comunque immediatamente.

Il tempo di ritardo è molto probabilmente un problema di prestazioni derivante dal rendering di un lungo elenco di elementi. Ci sono diversi add-on di Ember per aiutarlo con uno dei miei: https://github.com/runspired/smoke-and-mirrors

In alternativa/In aggiunta si può considerare di "smascherare" il proprio array in bit più piccoli e renderlo 25-50 alla volta, o impostare alcuni impaginazione.