Ember 路由：是否可以嵌套在“动词”路由中，而不仅仅是“名词”？

Question

我正在尝试在“专辑”的“编辑”页面上显示“曲目”列表。

我的 router.js.coffee 看起来像这样：

@resource 'albums', ->
  @resource 'album', path: '/:album_id', ->
    @route 'edit', ->
      @resource 'tracks'

如果我访问/albums/1/edit，“edit.handlebars”模板会正确显示。但是，如果我将{{outlet}} 标记放入该模板，它不会触发我的TracksRoute。

查看 Ember 检查器，似乎正在使用 'albums.edit.index' 路由，而我的 'tracks' 路由嵌套在同一级别，而不是在其下方：

albums (AlbumsRoute)
 |
 |
 |-> album (AlbumRoute)
      |
      |
      |-> album.edit (AlbumEditRoute)
           |
           |
           |-> tracks (TrackRoute)
           |
           |
           |-> album.edit.index (AlbumEdit.IndexRoute)

我想我希望TrackRoute 在AlbumEdit.IndexRoute 下方，但我会接受任何其他方式在父级的“编辑”页面上列出子模型记录（理想情况下，它们会列在这意味着我可以就地执行 CRUD 操作）

Answer 1

为此，您需要在同一路由中使用多个控制器：

Router.map(function() {
  this.resource('albums', function() {
    this.resource('album', {path: '/:album_id'}, function() {
      this.route('edit');
    });
  });
});

App.AlbumEditRoute = Em.Route.extend({
  setupController: function(editController, model) {
    var tracksController = this.controllerFor('tracks');

    this._super(editController, model);
    tracksController.set('model', model.get('tracks'));
  }
});

在您的模板中：album/edit/index.hbs

<div class="edit-form">
  {{!-- anything related to edit --}}
</div>

<div class="edit-tracks">
  {{render "tracks"}}
</div>