How to force reload route?

1

Good evening everyone.

How can I reload route (e.g. call route’s reload) in controller’s action?

Thanks.

2

What’s your use-case for reloading the route?

3

Refetch data from server.

Update button with some logic that need to be run on controller and model shood be reloaded.

4

@gagoman For the use-case you describe – responding to changes from the server – we actually notify the model or controller that it should refresh, rather than going back up to the route.

We do, however, use route refreshing for a different case. There are parts of our app that aren’t governed by Ember directly. Ember acts as a manager for those sections, but they do their own internal routing. (This is because they are also used in non-Ember places.) For this case, we put the router into a suspended state.

router.map(function(connect) {
  connect('/').to('index', function(connect) {
    connect('__suspended__').to('suspended');
    connect('books').to('books');
  });
});

Then, we tell the router to go to suspended and then immediately return to books or whatever. This causes the URL to rapidly switch to /__suspended__ and then back. In order to prevent that, we use a custom subclass of Ember.Location that simply ignores changes to and from /__suspended__.

2 Likes
5

Very useful information you have here :smile:

6

Why don’t you use refresh method in your route?

7

this.refresh() doesn’t reload components. It seems challenging to get a component to reload itself since there are sealed off from the outside.

8

My use case is dealing with the initialization of Zurb’s Foundation. I’ve created a component that can be added to the bottom of a template. After the dom is loaded then Foundations Javascript is applied. Think abide validation rules. Problem is when the model updates for this template the component isn’t reloaded so Foundations Javascript is unaware of the new content now in the dom.

9

Just to follow up. I ended up observing one of the routes model for change.

My component looks likes this:

import Ember from 'ember';

/* global Foundation */
export default Ember.Component.extend({

//Overload if needed
observedModel: [],

//Observer watchs for model change and reloads foundation.  Not required.  But can be helpful.
foundationModelObserver: function() {
    this.loadFoundation();
}.on('didInsertElement').observes('observedModel.length'),

didRender() {
    this._super(...arguments);
    this.loadFoundation();
},

loadFoundation() {
    Ember.run.scheduleOnce('afterRender', this, () => {
        Ember.$(document).foundation();

        //Put Foundation abide default validations here...
    });
}

In my template:

{{foundation-init observedModel=model}}

So now when the model changes Foundation’s javascript gets re-applied.