我有两个型号,视频属于一个类别。一个类别有很多视频。我的家乡路线上有一个类别列表。当您单击其中一个类别时,您将转换到类别路径,该类别路径在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);
}
});
如何进行此设置,以便当您从主页单击某个类别时,将显示该类别中的第一个视频,并且该类别中的其他视频将显示在侧栏中,以便在您单击时它们变成了细节,那个类别中的其他视频成了主人吗?
所以要澄清..我现在拥有的是类别列表是主人,所选类别中的所有视频都是详细信息。我需要的是所有类别中的视频都是主视频,类别中的第一个视频或所选视频是详细信息。
答案 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....
}