Ember.js如何添加不相关的内容(侧栏/页脚/模式)和通行证id
我正在开发一个相当简单的Emberjs应用程序。然而,我很难弄清楚其中的一部分 这是一个简单的客户端演示应用程序。我正在制作不同的页面,当用户访问每个页面时,会弹出一个模式对话框。我正在使用fixture适配器,并将每个页面的modals内容指定为fixture 我有我导航到的页面,有些页面有我传入的id。我为每一个都定义了我的路线 现在我已经完成了所有这些设置,我想通过url传入id来将modals添加到页面中。不过,我似乎不需要在每个资源内部指定一个模式路由 例如: 这是我必须首先使用的代码:Ember.js如何添加不相关的内容(侧栏/页脚/模式)和通行证id,ember.js,Ember.js,我正在开发一个相当简单的Emberjs应用程序。然而,我很难弄清楚其中的一部分 这是一个简单的客户端演示应用程序。我正在制作不同的页面,当用户访问每个页面时,会弹出一个模式对话框。我正在使用fixture适配器,并将每个页面的modals内容指定为fixture 我有我导航到的页面,有些页面有我传入的id。我为每一个都定义了我的路线 现在我已经完成了所有这些设置,我想通过url传入id来将modals添加到页面中。不过,我似乎不需要在每个资源内部指定一个模式路由 例如: 这是我必须首先使用的代码
this.resource('test', {path: '/test'}, function() {
this.resource('question', { path: '/:test_id'});
});
this.resource('home', {path: '/home'});
当我想添加模态时,我似乎需要这样做,但是我必须将模态作为一条路径添加到我拥有的每一个资源中,这似乎是不对的。然后我也会有大量的模板/控制器等
this.resource('test', {path: '/test'}, function() {
this.resource('question', { path: '/:test_id'}, function() {
this.route('modal', {path: '/modal/:modal_id'});
});
});
this.resource('home', {path: '/home'}, function() {
this.route('modal', {path: '/modal/:modal_id'});
});
这可能是因为我是Emberjs的新手,但我还没有看到任何东西可以为页面上不相关的动态内容提供替代方案
非常感谢您的帮助。您可以通过URL传递内容,并将其用于您的路线。在您的路由中,有一个模型钩子,您应该可以访问包含所有URL动态段的params对象 您可以将其设置为示例中的嵌套路由,也可以将其设置为具有相同级别资源的嵌套路由。这意味着你不必重复 不确定这是否回答了这个问题。我觉得我可能遗漏了一些信息
你在展示什么情态动词?我通常显示与外部资源相关的内容,因此我个人避免使用全局“模式”路线。在这种情况下,我只是在不同的插座中呈现模态,并有一个封装了一些模态功能的路由/视图,但我不确定这是否与您需要的相同 您可以在应用程序路由中设置此操作
App.ApplicationRoute = App.Route.extend({
actions: {
showModal: function() {
this.render('modal', {
outlet: 'modal',
into: 'application'
});
},
hideModal: function() {
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
然后,您可以将查询参数与其他路由上的setupController结合使用
this.resource('test', {path: '/test'}, function() {
this.resource('question', { path: '/:test_id',queryParams: ['modalId']});
});
问题路线应该是这样的
App.QuestionRoute = App.Route.extend({
setupController:function(controller,model,queryParams){
controller.set('model',model);
if(queryParams.modalId){
var modalModel;
//Set your modal model, here you have access to the store, etc
this.controllerFor('modal').set('model', modalModel);
this.send('showModal')
}
else{
this.controllerFor('modal').set('model', null);
this.send('hideModal');
}
}
});
注意:queryparams是您应该激活的可选功能
您可以使用指向帮助器的链接,并转换到
链接到示例,以打开id为1的模式
{{#linkTo modelId=1}}modal 1{{/linkTo}}
结束
{{#linkTo modelId=false}}Close modal{{/linkTo}}
关于查询参数的更多信息我不喜欢添加到所有路由中,但这似乎是最合理的答案。您可以尝试将setupController挂钩添加到applicationRoute中,这取决于您的模态与特定路由的关系,或者制作RouteModel混入,必要时将其添加到路由定义中