Ember Szablon ładowania z płynnym ogniem

Question

Zrobiłem wiele majsterkowania z tym i nie wydaje się, aby to działało. Czekam na pokazanie mojego szablonu ładowania podczas oczekiwania na zwrot obietnicy z mojego modelu.

Moje domyślne zrozumienie, jeśli mam app/templates/loading.hbs, szablon ten będzie renderowany na wszystkich trasach. Jednak nawet przy tym szablonie w miejscu za każdym razem, gdy przełączam się między trasami, stara trasa pozostaje wyświetlana do momentu powrotu modelu, w którym to momencie następuje przejście płynnego ognia i zostajesz przeniesiony do następnej trasy.

Próbowałem różnych wersji tworzenia zagnieżdżonych szablonów ładujących dla każdej trasy, próbowałem tworzyć podprogramy dla każdej trasy dla szablonu ładowania, a nawet pomieszano z dostępnymi metodami beforeModel/afterModel, ale nie robię postępu. To ostatnia przeszkoda, którą chcę przejść przed uruchomieniem i jestem zdumiony, dlaczego nie mogę jej uruchomić. Oto kilka moich kodów, które moim zdaniem są istotne.

Uwaga: Używam Ember CLI i Liquid Fire. Moje dane są również wracane do modelu z serwisu Ember na czas.

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> 

Najwolniejsza modelu trasy

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

serwisowe Metody

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" 
     } 
... 
] 

Czytałem Docs na miejscu Ember jest wraz z różnymi innymi zasobami Google i nie może się dowiedzieć, dlaczego mój szablon ładowania w ogóle nie renderuje. Każda pomoc będzie niesamowita! Dzięki!

Answer 1

Ładowanie szablonów uruchamia się, gdy hak modelu zwraca obietnicę, która zajmuje dużo czasu, aby rozwiązać problem, jednak hak modelu nie zwraca obietnicy.

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

    return movies.getMoviesInAlphOrder(); 
} 

getMoviesInAlphOrder zwraca tablicę synchroniczną. Po dalszej rozmowie okazuje się, że wstępnie wypełniłeś tę stronę kliencką po tablicy zawierającej 540 elementów, więc problem polega na tym, że szablon ładujący nie tylko nie ma obietnicy oczekiwania, ale nawet jeśli to i tak rozwiązałoby to natychmiast.

Twoje opóźnienie jest bardzo prawdopodobne, że problem z wydajnością wynika z renderowania długiej listy elementów. Istnieje kilka dodatków Ember, w tym jeden z moich: https://github.com/runspired/smoke-and-mirrors

Alternatywnie/Dodatkowo możesz rozważyć "podzielenie" swojej tablicy na mniejsze bity i renderowanie jej od 25 do 50 na raz lub ustawienie niektórych paginacja.