TypeError and "Cannot call the method" connectOutlet "from undefined" in Ember.js

Question

I am trying to use Ember.js for a small demo site to view gigapanes of macroinvertebrates ( like this one for example). Each of them classifies the site into a taxonomic rank , in this case only order, family and gender (since they are all of the same class and we do not have identification at the species level). This is a small site, only 13 births. Here is a simple working example in which there is no navigation:

http://jsbin.com/ihapaw/10

On the main page, all three orders are listed, and under each of them are families, and then childbirth. Beat a little and you’ll see that I use dynamic segments to get the URL scheme that follows the pattern / ORDER _ID / FAMILY_ID / GENUS_ID.

What I would like to add now is a menu from which the user can select the transition to any rank or gender. The design brings up a menu button that the user clicks, a div appears with a list of all orders, families and genera, and the user can click to go to the desired page. Filling the menu bar, making it appear on the screen, etc., is not a problem. I'm having problems using links in the menu leads to Ember errors that I cannot understand. Here's the updated demo:

http://jsbin.com/ihapaw/14

In this demo, pretend that the blue area is the menu bar that appears after pressing the menu button. If you open the JavaScript console, then click on the "Brachycentrus" field in the blue menu area and then click on the "Tallaperla" field (last) in the menu area, you will see the following errors in the console

Error while loading route: TypeError {}

Uncaught TypeError: Cannot call method 'connectOutlet' of undefined

For the playback steps described above, I also see in the content area under the menu that, after clicking on "Tallappla genus", the order is correctly updated to "Plecoptera", but the family and genus are not. I guess the key is to the problem, but has no idea what that means. Perhaps I should add that it is not only these two kinds that cause the problem - it is easy to reprogram errors if you click enough in the menu area. This playback example was the easiest and fastest I could find.

I am using Ember 1.0.0-rc.6, Ember Data 0.13 and Handlebars 1.0.0-rc.4.

Answer 1

I looked at your code and it looks good. I believe this is the same error that I am encountering with nested routes using ember. Discussion is discussed here . Maybe you should call back. :)

I posted a temporary fix there that worked for me, but my routes were only at level 2, so it worked fine. Your nesting at 3 levels is deep, this fix may not work for you.

Another approach to your problem would be to use a single resource with several dynamic segments.

 this.resource('species', { path: '/:order_id/:family_id/:genus_id'}); 

You will lose flexibility in the controllers, forcing everything to be placed in one controller, and the route will have to do more work in find , based on which params are present. but it might work!