我正在工作一个相当简单的Emberjs应用程序。但是，我很难弄清楚一件。
这是一个针对客户的简单演示应用程序。当用户进入每个页面时，我正在制作不同的页面，并弹出一个模式对话框。我正在使用灯具适配器，并具有指定为灯具的每个页面的模态内容。
我有要浏览的页面，有些页面有ID传递。我为每个页面定义了路由。
现在，我已经完成了所有的设置，我想通过将id传递给url将模式添加到页面。似乎我不必在每个资源中都指定一个模态路由。
例如：
这是我必须开始的代码：
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的新手，但是我还没有看到任何可为页面上不相关的动态内容提供替代方法的东西。
任何帮助表示赞赏。
您可以在您的申请路线中设置此操作
App.ApplicationRoute = App.Route.extend({
actions: {
showModal: function() {
this.render('modal', {
outlet: 'modal',
into: 'application'
});
},
hideModal: function() {
this.disconnectOutlet({
outlet: 'modal',
parentView: 'application'
});
}
}
});
然后，您可以将查询参数与其他Route上的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是您应该激活http://emberjs.com/guides/configuring-ember/feature-flags/的可选功能
您可以使用链接到帮助器，以及transitionTo ...
链接至示例，用于打开ID为1的模态
{{#linkTo modelId=1}}modal 1{{/linkTo}}
收盘
{{#linkTo modelId=false}}Close modal{{/linkTo}}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句