Ember.js - 学习动态段,链接到嵌套路由

时间:2017-10-27 23:48:22

标签: ember.js

我正在尝试学习如何在Ember中进行动态细分。我以为我理解但显然它不起作用。 我的相应文件结构和模型查询是否正确?

router.js

Router.map(function() {
  this.route('photos', function() {
    this.route('photo', { path: '/:photo_id' }, function() {
      this.route('comments');
      this.route('comment', { path: '/comments/:comment_id' });
    });
  });
});

使用照片模型在应用中的某处创建动态链接列表:

{{#each photos as |photo|}}
  {{#link-to 'photos.photo' photo}}{{photo.name}}{{/link-to}}
{{/each}}

一切都与我的文件结构对齐吗?

文件结构:

app
├── controllers
|   └── photo
|   |   └── comment
|   |   |   └── index.js
|   |   ├── index.js
|   |   └── comments.js
|   └── photos.js
├── routes
|   └── photo
|   |   └── comment
|   |   |   └── index.js
|   |   ├── index.js
|   |   └── comments.js
|   └── photos.js
└── templates
|   └── photo
|   |   └── comment
|   |   |   └── index.hbs
|   |   ├── index.hbs
|   |   └── comments.hbs
|   └── photos.hbs
└── router.js

路由/ photos.js

model() {
  return this.store.findAll('photo');
}

假设我想显示带评论的所有照片,我可以获得下面的模型。

路由/照片/ index.js

model(params) {
  return this.store.findRecord('photo', params.photo_id, {include: 'comments'});
}

不确定接下来的两个型号。

路由/照片/ comments.js

model(params) {
  return this.store.query('comment', { photo: photo_id })
}

路由/照片/评论/ index.js

model(params) {
  return this.store.findRecord('comment', params.comment_id);
}

1 个答案:

答案 0 :(得分:1)

文件结构应该反映router.js文件中的内容。我只显示了路由层次结构,它适用于控制器和模板。

应用程序/路由/ photos.js
应用程序/路由/照片/ index.js
应用程序/路由/照片/ photo.js
app / routes / photos / photo / comments.js

您缺少photos文件夹。请参阅此alexspeller diagonal