Ember - abort the route and reload the route with same model

Design
1

In my ember app, when the user clicks the Back button of browser,I need to stop the transition (whereever it might take me as per Ember history) and reload the same url with same model. Have tried the below code, but doesnt seem to work:

search-route.js

var route = Ember.route.extend({
     actions:{
      willTransition: function(transition){
         if(this.controller.get('order') === 1){
             transition.abort();
             this.transitionTo('search',model)
         }
      }
    }
})

This doesnt seem to work and gives error about query params. So, i looked for what is there in transition object. Saw that as soon as I enter this code, the object transition contains prop queryParams but with the old values, not the current URL one. But there is another prop - transition.intent.preTransitionState.fullQueryParams which contains the current URL query params. Would that be used here somehow.

I looked for solutions and someone also suggested to put in this.refresh(), but also didn’t work.

2

Let me get this straight.

  1. User action triggers a transition from route1 to route2. route1 and route2 models are cached this way, let’s call them model1 and model2
  2. User clicks back button triggers a transition from route2 back to route1. You’re looking to abort this transition. But trigger another transition into route1 but still using the old model model1.

Is this correct?

3

Well, not actually. I am couple of routes, but lets say am just on route1. Now, currently I would say that things have been implemented a little wrong way, hence I kind of need this. On route1, there are some interactions (for e.g. there is a list and user sorts that etc) made just client side and when user clicks the back button, I want to reload the same route1 with the same model it was loaded initially. So, effectively just want to revert the user interactions and refresh the page.

4

Is the sorting implemented as query params? If so, then you only have 1 route.

You can do this in 2 ways.

  1. Have the sort action trigger a route transition into the same route with different query param.
Ember.Route.extend({
  actions: {
    sort(column, direction) {
      this.transitionTo(this.routeName, {
        queryParams: {
          column, direction
        }
      });
    }
  }
});
  1. The second way is to configure your route to replace model on query param change. And have your sort action set the query params.
Ember.Route.extend({
  queryParams: {
    column: {
      replaceModel: true
    },
    direction: {
      replaceModel: true
    }
  },
  actions: {
    sort(column, direction) {
      this.controller.setProperties({ column, direction });
    }
  }
});

I think I like the first way better. Much more DDAU.

5

Well, sorting was an example, there are other things user can do as well.

And sorting is not implemented in query params. The query params remain the same. The main thing is, on click of back button only, i want to reload the route (which has the same query params).

So, let’s say I am on route1 and user can do client interaction like sorting, some css animation and other stuff, which actually does not change the query param. And now when user hits back button, I want to revert all that what user did and the best is to reload the route with the unchanged query params.

6

You can always get the route instance via Route#routeFor. Calling Route#refresh will clear the cached model on that route. You can call Route#transitionTo immediately after the refresh to transition to the route while using the Route model hook to load the model.

7

I tried with transitionTo, as given in my code, but its kind of not working. Any idea, if I am doing it wrong.

8

Hmm, maybe you can make a Ember twiddle to better illustrate your problem?