javascript - Ember.js 中的 TypeError 和“无法调用未定义的方法‘connectOutlet’”

Question

我正在尝试将 Ember.js 用于一个小型演示站点，以查看 gigapans 的大型无脊椎动物（例如，像这个）。每个站点都按分类等级分类，在这种情况下只有目、科和属（因为它们都是同一类，我们没有物种级别的识别）。这是一个小网站，只有13属。这是一个简单的工作示例，只有导航：

http://jsbin.com/ihapaw/10

主页列出了所有三个目，每个目下是科，然后是属。单击一下，您会看到我正在使用动态段来获取遵循 /ORDER_ID/FAMILY_ID/GENUS_ID 模式的 URL 方案。

我现在想添加的是一个菜单，用户可以从中选择跳转到任何等级或属。该设计要求用户单击一个菜单按钮，一个 div 将显示所有订单、科和属的列表，用户可以单击以跳转到他们想要的页面。填充菜单面板，使其在单击时出现，等等都不是问题。我遇到的问题是使用菜单中的链接最终会导致我无法理解的 Ember 错误。这是一个更新的演示：

http://jsbin.com/ihapaw/14

在该演示中，假设蓝色区域是单击菜单按钮后出现的菜单面板。如果你打开 JavaScript 控制台，然后点击蓝色菜单区的“Brachycentrus”属，然后点击菜单区的“Tallaperla”属（最后一个），你会在控制台看到如下错误：

Error while loading route: TypeError {}

Uncaught TypeError: Cannot call method 'connectOutlet' of undefined

对于上面的复制步骤，我还在菜单下方的内容区域中看到，单击“Tallaperla”属后，顺序正确更新为“Plecoptera”，但家庭和属没有。我想这是问题的线索，但不知道这意味着什么。我也许应该补充一点，导致问题的不仅仅是这两个属 - 如果您在菜单区域中单击足够多的地方，很容易重现错误。那个重现的例子是我能找到的最简单和最快的。

我正在使用 Ember 1.0.0-rc.6、Ember Data 0.13 和 Handlebars 1.0.0-rc.4。

Answer 1

I've looked at your code and it looks good. I believe this is the same bug I am facing wrt nested routes with ember. There is a discussion going on about it here. Maybe you should chime in. :)

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

A different approach to your problem, would be to use a single resource with multiple dynamic segments.

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

You'll lose flexibility in the controllers, having to put everything in one controller, and the route would need to do more work in find based on which params are present. but it might work!