CODEWITHSUNDEEP
ember.jsroutes
mickyginger
mickyginger

Reputation: 113

emberJS nested route TypeError: cannot read property 'renderer' of undefined

This is driving me a little mad. It seems like such a simple thing, but I can't get it working.

Here's my router:

App.Router.map(function() {

    this.resource('pages', function() {
        this.resource('page', { path: '/:slug' }, function() {
            this.route('edit');
        });
        this.route('add');
    });
}

The issue is with the 'add' route.

Here's the setup:

App.PagesAddRoute = Ember.Route.extend({});
App.PagesAddController = Ember.Controller.extend({});
App.PagesAddView = Ember.View.extend({});


// templates/pages/add.hbs
<h1>Add New Page</h1>

There's an outlet in templates/pages.hbs which the page template renders into fine.

I've added a console.log on the init method all the route, controller and view objects. Each one is instantiating correctly, but when I navigate to /pages/add I get the following error message: 

TypeError {
    message: "Cannot read property 'rerender' of undefined",
    stack: "TypeError: Cannot read property 'rerender' of undefined
        at CoreView.extend.rerender (http://localhost:9000/bower_components/ember/ember.js:26575:33)
        at null._controllerDidChange (http://localhost:9000/bower_components/ember/ember.js:26494:14)
        at applyStr (http://localhost:9000/bower_components/ember/ember.js:7995:29)
        at sendEvent (http://localhost:9000/bower_components/ember/ember.js:3320:13)
        at notifyObservers (http://localhost:9000/bower_components/ember/ember.js:6226:9)
        at propertyDidChange (http://localhost:9000/bower_components/ember/ember.js:6076:7)
        at set (http://localhost:9000/bower_components/ember/ember.js:6493:13)
        at Descriptor.ComputedPropertyPrototype.set (http://localhost:9000/bower_components/ember/ember.js:1708:11)
        at set (http://localhost:9000/bower_components/ember/ember.js:6461:14)
        at setupView (http://localhost:9000/bower_components/ember/ember.js:38915:7)"
}

I'm running 1.6.0-beta.5 (but I was having the same issue in 1.5.1). Has anyone experienced this before?

Thanks in advance.

UPDATE:

Here's the pages route, controller and view:

App.PagesRoute = Ember.Route.extend({
    model: function() {
        return this.get('store').find('page');
    }
});

App.PagesController = Ember.Controller.extend({});
App.PagesView = Ember.View.extend({});

Upvotes: 3

Views: 1700

Answers (2)

mickyginger
mickyginger

Reputation: 113

OK, so this is quite embarassing...

During development, I was logging some stuff in the init method of the route, controller and view like so:

App.PagesAddRoute = Ember.Route.extend({
    init: function() {
        console.log('PagesAddRoute loaded');
    }
});

This is bad... Well, not if you want to debug your code, but if you do override the init method, make sure you call the parent init method with this._super():

App.PagesAddRoute = Ember.Route.extend({
    init: function() {
        console.log('PagesAddRoute loaded');
        this._super(); // Ember.Route.init called, so route loads correctly.
    }
});

That was actually what was causing the problem... The reason I was logging stuff in the first place was because I had originally put my template in /templates/page/add, rather than /templates/pages/add. My thinking being that I'm working with an Object (page), rather than an Array (pages)... However, the filesystem should have matched the router:

this.resource('pages', function() {
    this.resource('page', { path: '/:slug' }, function() {
        this.route('edit');
    });
    this.route('add'); // add sits within pages, so the path is pages/add
});

Hopefully this may still help someone.

Upvotes: 3

Kingpin2k
Kingpin2k

Reputation: 47367

App.PagesAddView = Ember.Controller.extend({});

needs to be

App.PagesAddView = Ember.View.extend({});

Upvotes: 1

Related Questions