Redirect to first object in Ember array

Question

I got a partial solution from Ember - Automatically redirect to firstObject but it's not working as expected:

My router:

App.Router.map(function() {
    this.resource('races', { path: '/'}, function() {
        this.resource('race', { path: '/:race_id'}, function() {
            this.route('edit');
            this.route('delete');
            this.route('splits');
        });
        this.route('create');
        this.route('info');
    });
});

Basically, I have a list of races and reach race has a time/pace view (the race resource). What I want is to never land on the races resource, so if I'm viewing a race and I delete it, I get redirected to the first race.

Using the solution from Ember - Automatically redirect to firstObject, EVERYTHING seems to redirect to the first race at which point all of my links and actions break and I "can't leave" the first race route.

Here's how I implemented the solution from the other post:

App.RacesRoute = Ember.Route.extend({
    model: function() {
        return this.store.find('race');
    },
    redirect: function(model) {
        var firstRace = this.modelFor('races').get('firstObject');
        this.transitionTo('race', firstRace);
    }
});

Answer 1

redirect has two arguments passed to it, the model and the transition object. The transition has the property targetName where you can conditionally redirect based on its value.

redirect: function(model, transition){
  if(transition.targetName =='races.index'){
    this.transitionTo('race', model.get('firstObject'));
  }
}