emberjs中两个相关模型的主从关系

Question

我有两个模型，视频属于一个类别。一个类别有很多视频。我在回家的路线上有一个分类列表。当您单击其中一个类别时，您将转换到类别路径，该路径在categories.hbs的左侧显示类别列表，在category.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>

以下是其他路线

categories.js

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

category.js

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

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

所以为了澄清..。我现在有的是类别的列表是主，所有的视频在选定的类别是细节。我需要的是在类别中的所有视频都是主，并在类别中的第一个视频或选定的视频是细节。

Answer 1

这就是我到目前为止所得到的

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

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' });
    });

  });

因此，我现在可以从主页单击某个类别，并获得该类别的视频的侧边栏。

这是category.hbs

<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....
  }