Edit route generating an empty phantom object

1

In my router file, I have something like this:

this.resource('project', { path: 'project/:project_id' }, function() {
  this.route('edit');
});

I have a link to a project in a template that looks like this:

{{#link-to 'project.edit' project}}edit{{/link-to}}

My edit project route looks like:

import Ember from 'ember';

export default Ember.Route.extend({
  model: function(params) {
    return this.store.findRecord('project', params.project_id);
  }
});

When I click the edit link for a project and navigate to the edit page, the page renders as expected. However, when I navigate back to the projects index view, there is now an additional phantom object added to the list. A new phantom object gets created every time I hit the edit page for a project.

If I don’t nest the edit route under the project resource, no phantom object is created. Obviously, something about this nesting is causing the auto-creation of a new object. But, it’s unclear to me where this is happening. Does anyone know what I am doing wrong?

2

Any chance you can reproduce this with a jsfiddle? Here is a base to get started JS Bin - Collaborative JavaScript Debugging

3

The problem appears to be with the route. Here’s the route that I’ve ended up using:

this.route('projects', function() {
  this.route('edit', { path: ':project_id/edit' });
});

This gives me the edit behavior I was expecting.

I think the original route I was using resulted in Ember auto creating a blank project model when I visited the edit path. I don’t completely understand why, but suspect it has something to do with the nesting of the edit route inside the project show route.