Force ember route to request additional data before rendering

Question

I'm trying to get a nested route to make a request for additional data, update the record, and then render the view. See below:

// models
var attr = DS.attr,
    hasMany = DS.hasMany,
    belongsTo = DS.belongsTo

App.List = DS.Model.extend({
    title: attr('string'),
    links: hasMany('link')
})

App.Link = DS.Model.extend({
    list: belongsTo('list'),
    subtitle: attr('string'),
})

// JSON for index route
{
    "list": [
        {
            "id": 532,
            "title": "first list"
         },
         {
            "id": 991,
            "title": "second list"
         },
         {
            "id": 382,
            "title": "third list"
         }
    ]
}

// JSON for list route - /user/532
{
    "list": 
        {
            "id": 532,
            "title": "list numero uno",
            "links" : [1, 2]
         },
    "link": [
        {
            "id": 1,
            "subtitle": "this is a subtitle of the firsto listo!"
        },
        {
            "id": 2,
            "subtitle": "this is a subtitle of a second part in the list"
        }
    ]
}

// routing
this.resource('user', function(){
    this.route('list', {path: ':id'})
})
App.UserRoute = Ember.Route.extend({
    model: function(){
        return this.store.find('list')
    }
})
App.UserListRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('list', params.id)
    }
})

I want the index route to display a basic list with just the {{title}}, and clicking on one links it to UserListRoute which then makes another ajax call to update the record with the additional link data. I've tried adding:

afterModel: function(modal){
    model.reload()
}

to the UserListRoute but it initially uses the index route model, and then it reloads with the new data. I'm trying to avoid this, and make it send an ajax request immediately and then render the content - so I don't want it to depend on the parent model/data.

Answer 1

I tried with kingpin2k's answer, and it worked on a page refresh but navigating from the user index to the nested still caused it to use the parent model. I figured out why it wasn't used the correct model. My links on the user index template were:

{{#link-to 'user.list' this}} {{title}} {{/link-to}}

So clicking on link correctly redirects me to /users/:id, but it passes on the data of the item selected. To remedy this I did:

{{#link-to `user.list` id}} {{title}} {{/link-to}}

So by changing this to id, when it transitions to the route, it uses the appropriate model specified in the route.

Answer 2

create a different record type, and extend from the original, or just use a completely different model.

App.BasicList = DS.Model.extend({
 foo: DS.attr()
});


App.FullList = App.BasicList.extend({
  //foo
  bar: DS.attr()
});

App.UserListRoute = Ember.Route.extend({
    model: function(params) {
        return this.store.find('fullList', params.id)
    }
})