Ember - Transition to same route with same model

Question

I have a left tree list, and each item in the list opens same route with different model. What i want is, if i click on the same item again and again, i want the route to load again. I know ember doesn't normally function this way. Are there any tweaks to achieve this?

Update: Left tree is parent route.On clicking items in left tree, child route is loaded in its outlet.

My left tree will be structured like this,

item1(link to bodyRoute1 with model1) item2(link to bodyRoute1 with model2) item3(link to bodyRoute1 with model3) item4(link to bodyRoute2 with model1) ...etc

Answer 1

You could use refresh() route method api link, for example:

// route
actions: {
  refreshRoute: function() {
    this.refresh();
  }
}

//template
<ul>
  {{#each items as |item|}}
    <li {{action 'refreshRoute'}}>{{item}}</li>
  {{/each}}
</ul>

Update

One of the controller property need to be updated from server

So you could use afterModel model hook.

From guides:

The most common reason for this is that if you're transitioning into a route with a dynamic URL segment via {{link-to}} or transitionTo (as opposed to a transition caused by a URL change), the model for the route you're transitioning into will have already been specified (e.g. {{#link-to 'article' article}} or this.transitionTo('article', article)), in which case the model hook won't get called.

In these cases, you'll need to make use of either the beforeModel or afterModel hook to house any logic while the router is still gathering all of the route's models to perform a transition.

Answer 2

I got it working by doing like this,

I maintain the currentRouteName and currentModelId(An id to uniquely identify the model) in an object and it is injected in all routes. It gets updated on any transition.

All the transitions from left tree go through a common function, And in that function i check if the forwarding route,modelId is the same as current route,modelId. If so, i change the value of another globally injected property refreshSameRoute. This value is observed in the child routes and if it changes this.refresh() is called.

Still searching for a better method.

Answer 3

The methods for transitions, like transitionToRoute and replaceRoute, returns some params, including the targetName. When the query params are the same, the targetName returns undefined. You can check that and do a route refreshing.

const queryParams = {<your params>};
const routeName = 'my.route';
const transition = this.transitionToRoute(routeName, { queryParams });
if (transition.targetName !== routeName) {
    const route = getOwner(this).lookup(`route:${routeName}`);
    route.refresh();
}