Ember.js redirect to first item error

Question

I have a list of tickets. When I go to route "tickets" I display a list of them. I want the first item to be automatically selected. I found the solution here on stackoverflow, but it doesn't work for me. The code is:

window.App = Ember.Application.create();

App.Router.map(function() {
    this.resource('tickets', function() {
        this.resource('ticket', { path: ':ticket_id' });
    });
    this.resource('feedback');
});

App.TicketsRoute = Ember.Route.extend({
    model: function() {
        return App.Ticket.find();
    }, 
    redirect: function() {
        var ticket = this.modelFor('tickets').get('firstObject');
        this.transitionTo('ticket', ticket);
    }
});

When I first time visit tickets route it selects the first item. But then I go to another route and return to tickets. After that I get next error:

WARNING: The immediate parent route ('a') did not render into the main outlet and the    default 'into' option ('p') may not be expected

And the markup becomes wrong, it doesn't display list of items (only detailed info about first ticket). I don't understand the error.

Thanks in advance!

Mike Grassotti Mike Grassotti · Accepted Answer · 2013-05-26T02:41:31

The warning is because the template that was rendering did not find an outlet in it's parent. I'm guessing maybe you have a ticket.hbs template but no tickets.hbs? Ideally it should be something like:

// in tickets.hbs
{{#each ticket in tickets}}
  //ticket link
{{/each}}
{{outlet}}

// tickets/index.hbs
Please select a ticket from the list

// in ticket.hbs
// ticket details

See https://github.com/emberjs/ember.js/pull/1916#issuecomment-13669980 for an explanation.

Ember.js redirect to first item error

1 Answers