Ember.js - Cannot render the 'edit' .hbs for an instance of a model.

Question

I am trying to {{#link-to}} the '/edit' route of a specific instance of a model, 'category/2' making route to 'category/2/edit'.

The problem is when I use the url 'category/2/edit' the page remains on the 'category/2' page except that all of the attributes defined in the model for 'category' like {{CategoryType}}, for instance, disappear.

I don't receive a single error while doing this.

Without further ado, here is my code.

router.js ----

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

category.hbs ----

Notes: {{CategoryName}} initially does show up when the page first loads. Only when the page is reloaded or when I try to link to the 'edit' does it disappear.

Category: {{ProjectName}}
{{#link-to 'this.edit'}}<button>Edit this</button>{{/link-to}}

category_route.js ----

Notes: *I'm defining :category_id in the model*

    VpcYeoman.CategoryRoute = Ember.Route.extend({   
        model: function(params) {       
            return {
                id: params.category_id
             };
        }
    });

category_model.js ----

Notes: I cut out the other fixtures to simply this

VpcYeoman.Category = DS.Model.extend({
    CategoryName: DS.attr('string'),
    workflow: DS.belongsTo('category', {
        polymorphic: true
    }),
    classNameBindings: ['isAdministrator']
});

VpcYeoman.Category.FIXTURES=[
    {
      id: 2,
      RecordCategoryID: 2,
      Name: "Nilport",
      CategoryName: "Broden Cannon Project"
    }
];

I appreciate this guys!

Answer 1

Include an {{outlet}} in category.hbs

You may also have to set the model for the edit route:

VpcYeoman.CategoryEditRoute = Ember.Route.extend({   
    model: function(params) {       
        return {
            id: params.category_id
         };
    }
});