CODEWITHSUNDEEP
javascriptember.jshandlebars.jsember-routerember-components
cahyowhy
cahyowhy

Reputation: 563

remove template in renderTemplate ember route after loading is finished

i made a loading view when the route has to much waiting for the data, this is my route

import Ember from 'ember';
import ENV from '../../config/environment';

export default Ember.Route.extend({
  desaService: Ember.inject.service(),
  model(){
    return Ember.RSVP.hash({
      currentlyLoading:true,
      desas: this.get('desaService').find(ENV.defaultOffset, ENV.defaultLimit),
      desaCount: this.get('desaService').count()
    });
  },
  setupController(controller, model) {
    this.controllerFor('backend.master-desa').set('desas', model.desas);
    this.controllerFor('backend.master-desa').set('currentlyLoading', model.currentlyLoading);
    this.controllerFor('backend.master-desa').set('desaCount', model.desaCount);
  },
  renderTemplate(controller, model){
    let controller2 = this.controllerFor('backend.master-desa');
    if(controller2.get('currentlyLoading')){
      this.render('components/common/loading-view', {
        into:'application'
      });
    }
  },
  actions:{
    loading(transition, originRoute){
      let controller = this.controllerFor('backend.master-desa');
      controller.set('currentlyLoading', true);
      transition.promise.finally(function() {
        controller.set('currentlyLoading', false);
      });
    }
  }
});

first i set currentlyLoading true, then the renderTemplate will be called and showing 'components/common/loading-view' into application.hbs. this is work but i need to remove that 'components/common/loading-view' after the loading actions has complete. please help me :(

Upvotes: 0

Views: 425

Answers (2)

feanor07
feanor07

Reputation: 3368

You can make use of disconnectOutlet method of router. What you need to do is to call the following to remove the template that is rendered within renderTemplate hook method.

  actions:{
    loading(transition, originRoute){
      let _this = this;
      let controller = this.controllerFor('backend.master-desa');
      controller.set('currentlyLoading', true);
      transition.promise.finally(function() {
        controller.set('currentlyLoading', false);
        _this.disconnectOutlet({
          outlet: '',
          parentView: 'application'
        });
      });
    }
  }

However, if you run your application probably you are going to see that nothing is rendered. Here is the reason:

renderTemplate hook is run after model is already solved; hence you will see nothing until the model is fully resolved. renderTemplate hook will be run to make a rendering; however loading event within actions will be fired and you will remove the template that is about to be rendered since loading is finished. Hence, you will not achieve what you want with this design approach.

You need to is to render something before model is fully resolved; and that is explained in the guide specifically. I suggest you to go over it and ask more if you run into some issues.

I have prepared the following twiddle for you that illustrates both usage of a loading template to show until model is fully resolved and usage of disconnectOutlet to remove a template that is rendered to a specific outlet. I hope this will help you understand better. Best Regards.

Upvotes: 1

Gennady Dogaev
Gennady Dogaev

Reputation: 5991

You doing it wrong, read the guide. All you need is to create a loading.hbs file and put html for loading screen there.

Also, if you want to create a loading indicator that will be displayed while assets are loading and application is starting, you can use this addon

Also, Your setupController can be simplified to controller.setProperties(model);. setProperties doc

Upvotes: 0

Related Questions