与Emberjs中两个相关模型的主细节关系

时间:2015-06-11 14:37:21

标签: ember.js

我有两个型号,视频属于一个类别。一个类别有很多视频。我的家乡路线上有一个类别列表。当您单击其中一个类别时,您将转换到类别路径,该类别路径在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);
  }
});

如何进行此设置,以便当您从主页单击某个类别时,将显示该类别中的第一个视频,并且该类别中的其他视频将显示在侧栏中,以便在您单击时它们变成了细节,那个类别中的其他视频成了主人吗?

所以要澄清..我现在拥有的是类别列表是主人,所选类别中的所有视频都是详细信息。我需要的是所有类别中的视频都是主视频,类别中的第一个视频或所选视频是详细信息。

1 个答案:

答案 0 :(得分:0)

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

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

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