Javascript 如何在Ember.js中重复资源
我有一个页面资源,它使用url中的页面标题Javascript 如何在Ember.js中重复资源,javascript,ember.js,Javascript,Ember.js,我有一个页面资源,它使用url中的页面标题 App.Router.map(function () { this.resource('page', { path: '/:page_id' }); }); App.PageRoute = Ember.Route.extend({ serialize: function(model) { return { page_id: model.title}; } }); 在这方面做得很好。但是,我希望在url
App.Router.map(function () {
this.resource('page', {
path: '/:page_id'
});
});
App.PageRoute = Ember.Route.extend({
serialize: function(model) {
return { page_id: model.title};
}
});
在这方面做得很好。但是,我希望在url中嵌套子页面,如下所示:
本地主机/#/main_页/子_页
我试图创建一个子资源(),但我不确定这是否是正确的方法
App.Router.map(function () {
this.resource('page', {path: '/:page_id'},
this.resource('subpage', {path: '/:page_id/:subpage_id'}));
});
在我的尝试中有两个主要问题:我必须重复我的页面视图,并且它不能在url中保留父页面。我得到:
本地主机/#/未定义/子页面
我的方向对吗?只有一种资源可以做到这一点吗
提前谢谢 您考虑过嵌套资源吗
App.Router.map(function () {
this.resource('page', {path: '/:page_id'}, function(){
this.resource('subpage', {path: '/:subpage_id'});
});
});
这将至少启用您要求的URL结构,但我不确定您的要求。我所做的大多数修改都是在您的html和模板中进行的。请不要用经典锚点()将Handlebar指向helper的链接混在一起,也不要更改指向tagname属性的链接,或者在这样做之前至少要三思。 首先-将testData移动到全局可访问的对象,以便您可以在菜单中使用它: Javascript:
App.CustomRoutes = [{
id: 1,
title: 'single'
}, {
id: 2,
title: 'subpages',
pages: [{
id: 3,
title: 'subpage1'
}, {
id: 4,
title: 'subpage2'
}, {
id: 5,
title: 'subpage3'
}]
}];
Html:
最后,这里是路线的定义。因为子页面嵌套在页面中,所以路由必须称为PageSubpageRoute。如果它嵌套在Foo中,那么它应该是foosubageroute。
注意:路由器内的this.render()调用具有以下参数:(,)
代码如下:
<ul class="navbar-nav nav">
{{#each page in App.CustomRoutes}}
<li class='menu-item'>
{{#link-to 'page' page.title}}
{{page.title}}
{{#if page.pages}}
<b class="caret"></b>
{{/if}}
{{/link-to}}
<span class='subpages'>
<ul>
{{#each subpage in page.pages}}
<li>
{{#link-to 'page.subpage' page.title subpage.title}}
{{subpage.title}}
{{/link-to}}
</li>
{{/each}}
</ul>
</span>
</li>
{{/each}}
</ul>
App.Router.map(function () {
this.resource('page', {path: '/:page_id'},
function() { this.route('subpage', {path: '/:subpage_id'});});
});
App.PageSubpageRoute = Ember.Route.extend({
model: function(params) {
var parentModel = this.modelFor('page');
var res = $.grep(parentModel.pages, function (e) {
if (e.title == params.subpage_id) {
return e;
}
});
return res[0];
},
serialize: function(model) {
return { subpage_id: model.title};
},
renderTemplate: function() {
this.render('subpage');
}
});
App.PageRoute = Ember.Route.extend({
serialize: function(model) {
return { page_id: model.title};
},
model: function (params) {
return $.grep(App.CustomRoutes, function (e) {
if (e.title == params.page_id) {
return e;
}
})[0];
}
});