I do a lot of this and cannot make it work. I want to show my boot template while waiting for my model to return.
My understanding, by default, if I have app/templates/loading.hbs , this template will be displayed on all routes. However, even when using this template, every time you switch between routes, the old route remains displayed until the model returns, and at that moment my transition with a liquid fire occurs, and you proceed to the next route.
I tried a different version of creating nested loading templates for each route, tried to create routines for each route for the loading template, and even mixed up with the beforeModel / afterModel methods that are available, but I'm not progressing. This is the last obstacle that I want to cross before launching, and I wonder why I cannot get it to work. Here is a bunch of my code that I think is appropriate.
Note. I use Ember CLI and Liquid Fire. My data is also being returned to the model from Am Ember Service currently.
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>
The slowest model route
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);
Service Methods
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" } ... ]
I read the documents on the Ember site along with various other Google resources and cannot understand why my boot template does not appear at all. Any help would be awesome! Thanks!