Ember.js 如何在emberjs中正确构造路由和文件夹？

假设我有这个文件夹结构：

- app
-- pods
--- dashboard
----- zones
------ index
------- controller.js
------- route.js
------- template.hbs
------ show
------- areas
-------- controller.js
-------- route.js
-------- template.hbs
------- controller.js
------- route.js
------- template.hbs

在

router.js中

    this.route('zones', function() {
      this.route('show', { path: ':zone_id/cities' }, function() {
        this.route('areas', { path: ':city_id/areas'});
      });
    });

现在

当我访问
仪表板/区域
-将加载所有区域

当我单击区域中的一个项目时，它将被重定向到
仪表板/区域/1/城市
将在页面中加载城市

当我单击城市中的一个项目时，它将被重定向到
/dashboard/zones/1/cities/4/area
-

现在的问题是
/dashboard/zones/1/cities/4/areas
url被正确命中，但模板没有显示

我的设置缺少什么或有什么问题？
确保父模板中有
{{outlet}