TransitionTo triggers two routes

Question

I have two routes for my places resource: One overview '/places', and one detail view '/places/:id.

this.resource('places', function () {
    this.resource('place', { path: '/:place_id' }, function () {
    });
});

In my application controller, i.e. at the start of the app, I want to perform a redirect if some conditions are met. I do the transition via

if (condition) {
    this.store.find('place', 0).then(
        function (place) {
            self.transitionTo('place.index', place);
        }
    );
}

When I log the transitions via LOG_TRANSITIONS: true, it outputs Transitioned into 'places.place.index' - which looks good.

However, it triggers two routes to render a template: The PlacesRoute and the PlaceRoute. And since both use a different outlet to render their templates, I see the content from both.

How can I prevent this behavior? When I later perform a transition to another place, everything works as I expect it to be, i.e. it only triggers the PlacesRoute (and not the PlaceRoute).

Answer 1

First of all, I'd suggest to rename 'place' resource to 'places.place' (this.resource('places.place', ...) or this.route('place', ...) for latest versions of Ember).

Secondary, what are you trying to do? When Ember handling transition to child route, it's should load and render routes up in the hierarchy (application route->places route->place route in case transition to places.place route). If route already presented (rendered), nothing happens (ex: transition from places.place with place id 1 to places.place with place id 2 will not trigger rerendering for application and places routes).

Think about child routes as progressive specification of displayed information: in places route user sees list of places and in places.place route he sees list of places and information about one particular place.