vendredi 24 juin 2016

Show loading template in Ember

I have been doing a lot of tinkering with this and can't seem to get it working. I am looking to show my loading template while waiting for my model promise to return.

My understanding is, by default, if I have app/templates/loading.hbs, this template will be rendered across all routes. However, even with that template in place whenever I switch between routes the old route remains displayed until the model returns, at which point my liquid fire transition occurs and you're taken to the next route.

I have tried various version of creating nested loading templates for each route, tried creating subroutes for each route for the loading template, and have even messed with the beforeModel/afterModel methods that are available but I am making no progress. This is the last hurdle I want to cross before launching and am perplexed as to why I can't get it working. Here is a bunch of my code I feel is relevant.

Note: I am using Ember CLI and Liquid Fire. My data is also being returned to the model from am Ember Service for the time being.

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>

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

I have read the docs on Ember's site along with various other Google resources and can't seem to figure out why my loading template isn't rendering at all. Any help would be awesome! Thanks!




Aucun commentaire:

Enregistrer un commentaire