ember-cli中的嵌套资源,凌乱的应用程序结构

Question

作为Ember.js和ember-cli的新手,我无法理解使我的应用程序工作所需的内容.

我的应用程序的逻辑层次结构如下:

Projects
|___Project
    |___Details
    |___Team Members
    |___Budget
        |___Planned
        |___Actual

目前,这是我的router.js:

  this.resource('projects');
  this.resource('project', { path: 'projects/:project_id' }, function() {
    this.route('details');
    this.route('team');
    this.route('milestones');
    this.resource('budget', function(){
      this.route('project-budget', { path: 'project'});
      this.route('resource-budget', {path: 'team'});
    });
  });

我遇到的问题是放置文件的位置.直到预算下两个嵌套路由的点,我的文件夹结构看起来像我的层次结构,但由于资源重置命名空间,现在为了使其工作,我必须将我的预算模板,路由和控制器拉回到顶部等级(使用项目的东西),这看起来很混乱,并且在稍后尝试维护此事时会引起令人头疼的问题.

我做错了吗？

Answer 1

在Ember中,路由器定义可能有点棘手.router.js中的资源/路由定义应该反映您的页面结构.因此,例如,如果您的"团队"模板应嵌套在"项目"模板中,那么"团队"应该嵌套在router.js中的"项目"内:

Router.map(function() {
    this.resource('project', function() {
         this.route('team');
    });
});

如果你在router.js中使用this.route(),那么你的文件夹结构应该模仿router.js中的结构.使用上面的例子,因为我们使用this.route()来定义'team',你的文件夹结构将是这样的:

app/routes/project.js
app/routes/project/team.js
app/templates/project.hbs
app/templates/project/team.hbs

但是,如果您选择在router.js中使用this.resource(),那么您告诉Ember您将重置文件夹结构.所以,如果你将router.js改为:

Router.map(function() {
    this.resource('project', function() {
         this.resource('team');
    });
});

...然后您的文件夹结构将是这样的:

app/routes/project.js
app/routes/team.js
app/templates/project.hbs
app/templates/team.hbs

回到你的具体问题,如果你觉得重置你的文件夹结构很乱,那么你可以在任何地方使用this.route()并放弃this.resource(),因为可嵌套this.route()登陆Ember 1.7:http: //emberjs.com/blog/2014/08/23/ember-1-7-0-released.html