Nested Route, Updated Record Gets Reordered

Question

seeing some strange behavior, totally stumped.

i have a nested route, so “route1.show.route2.show”. Upon hitting route1.show, a list of items are loaded - and clicking any item loads the nested route for that item.

What I’m seeing is that clicking any item correctly loads the nested route, but the original list of items is reordered, so that the clicked item is now last in the list.

The first route’s model hook isn’t being called (because i’m using the resource in the link-to, not the resource.id)

but the nested route is reloading the nested resource, with more fields added. why would reloading this one item cause ember data to change the order of the association in the parent route?

Parent route model hook:

model(params) {
 this.get('store').findRecord('resource', params.resource_id);
}

Nested route model hook:

model(params) {
  return this.get('store').findRecord('nestedResource', params.nestedResource_id);
}

UPDATE: On the parent route, the association is sideloaded on the request. Theres a list of association records on this route, and is list what's getting reordered each time the nested route model is loaded.

I think this is expected behavior if you aren't sorting your parent model. The fresh record will be removed and then appended. — alizahid

alizahid alizahid · Accepted Answer · 2016-10-14T07:50:35

On your parent route, sort the model to prevent the new load from messing with the order.

model() {
    return this.store.findAll('resource')
        .then(resources => resources.sortBy('time'))
}

Assuming the nestedResource is an array-like property on your resource model.

export default Model.extend({
    sortedNestedResource: Ember.computed.sort('nestedResource', 'sortBy'),
    sortBy: ['date']
})

Then use sortedNestedResource in your template, instead of nestedResource.

Nested Route, Updated Record Gets Reordered

1 Answers