[英]How to position a modal relative to clicked action in ember.js
我有一个emberjs应用程序,一个人可以:
单击链接模态弹出更改某些内容单击模态保存更改
我创建了类似于此处所述的模式,并带有路线上的事件。 我可以将ember对象解析为路由,但似乎无法获得单击的DOM元素。 我想要获得单击的DOM元素,因为我需要它的位置。 我想相对于单击的DOM元素放置一个弹出窗口。
我在.hbs文件中的操作如下所示:
<a {{action open option}} class='choose-template'>Choose Template</a>
这个动作是由路线处理的
events: {
open: function(option) {
this.controller.set('field_option', option);
this.render('modal', // the view to render
{
into: 'application', // the template to render into
outlet: 'modal' // the name of the outlet in that template
}
);
},
close: function() {
this.render('nothing',
{ into: 'application', outlet: 'modal' });
}
}
我在App.ModalView.didInsertElement()
处理模型定位。 在这里,我想使用链接DOM元素来使模态位置本身相对于单击的链接。
如果您没有在view
截获action
事件,它们会一直冒到没有事件可用的路线。 因此,要获取事件以及由此而来的元素位置,您应该在view
定义并捕获action
事件。
因此,与其在route
放置事件处理程序,不如在view
创建它们:
App.ModalView = Ember.View.extend({
open: function(event) {
// here your then have access to your event
// Example on getting the position
var posX = this.$().position().left,posY = this.$().position().top;
console.log((event.pageX - posX) + ' , ' + (event.pageY - posY));
// and then you could invoke the functions you want on your controller by
this.get('controller').send('open', andhereparameters);
},
close: function(event) {
// here your then have access to your event
// same as above
}
});
仅需注意一点,默认情况下,操作的目标是控制器,因此如果要定位view
,则应定义它:
<a {{action open option target="view"}} class='choose-template'>Choose Template</a>
希望能帮助到你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.