Ember.js 在emberjs中掌握与两个相关模型的详细关系

我有两个模型，视频属于一个类别。一个类别有很多视频。我在回家的路上有一张分类表。当您单击其中一个类别时，您将过渡到类别路径，该路径在categories.hbs左侧显示类别列表，并在categories.hbs中显示该类别的视频，因此类别路径是主路径，类别是详细路径

这是我当前的路由器：

export default Router.map(function() {
  this.resource('home', { path: '/' }, function() {
  });

  this.resource('categories', { path: 'categories' }, function() {
    this.resource('category', { path: ':category_id' });
  });

  this.resource('videos', { path: 'videos' }, function() {
    this.resource('video', { path: ':video_id' });
  });

});

这是我的主页路线

application.js

export default Ember.Route.extend({
    model: function() {
        return this.store.find('category');
    }
});

主页模板

home.hbs

<div class="col-md-12">
<div class="btn-group-vertical" role="group" aria-label="...">
 {{#each category in model}}
    {{#link-to 'category' category}}<img src="{{category.photo}}" />{{/link-to}} 
 {{/each}}
</div>
</div>

category.js

export default Ember.Route.extend({
    model: function(params) {
    return this.store.find('category', params.category_id);
  }
});

如何设置此设置，以便当您从主页上单击某个类别时，该类别中的第一个视频将显示，该类别中的其他视频将显示在侧边栏中，这样当您单击其中一个时，它将成为详细信息，该类别中的其他视频将成为主视频

---

所以我想澄清一下。。我现在拥有的是主分类列表，所选分类中的所有视频都是细节。我需要的是类别中的所有视频都是主视频，类别中的第一个视频或选定的视频是细节

到目前为止，我得出的结论如下

我的路由器现在看起来像这样：

var Router = Ember.Router.extend({
  location: config.locationType
});

export default Router.map(function() {
  this.resource('home', { path: '/' }, function() {
    this.resource('show', { path: ':video_id' });
  });

  this.resource('categories', { path: 'categories' }, function() {
    this.resource('category', { path: ':category_id' }, function() {
        this.resource('vid', { path: ':video_id' });
    });

  });

因此，我现在可以点击从主页到一个类别，并获得一个与该类别的视频侧栏

这是分类

<div class="col-md-2">
 <h2>Category: {{name}}</h2>
  {{#each video in videos}}
    {{#link-to 'vid' video}}{{video.title}}{{/link-to}}<br />
  {{/each}}
 </div>

 {{outlet}}

---

“…当您在主页上单击某个类别时…”-您可能希望显示主路线、控制器和模板。请创建一个包含灰烬数据的演示。后端使用Mockjax。我添加了主页路由和模板，没有控制器。至于演示，我对emberjs和使用ember cli是全新的，所以我不确定如果我想在emberjs.jsbin.com上创建演示，但我可以试试。

<div class="col-md-2">
 <h2>Category: {{name}}</h2>
  {{#each video in videos}}
    {{#link-to 'vid' video}}{{video.title}}{{/link-to}}<br />
  {{/each}}
 </div>

 {{outlet}}

afterModel: function(category, transition) {
    //code that transitions to the first video in category.videos using the vid route....
  }