[英]JQuery UI resizable Resize event bind/on resize event to Backbone View
I have a view, NOT the size of the window, nor the window itself, and when it resizes, I want to compare the beginning and the ending value of the resize. 我有一个视图,而不是窗口的大小,也不是窗口本身,并且在调整大小时,我想比较调整大小的开始和结束值。 JQ-UI's resize ui object however includes only the previous state, not original, so it is only grabbing the changes by pixels (albeit I think that is because I am putting the code in the resize function, and not the end function, but that isn't the real problem, as I could solve it once I know how to get the var back to the Backbone View itself).
但是,JQ-UI的调整大小ui对象仅包含以前的状态,而不包括原始状态,因此它仅按像素捕获更改(尽管我认为这是因为我将代码放入调整大小函数中,而不是结束函数中,但是并不是真正的问题,因为一旦知道如何使var返回Backbone View本身,我就可以解决。 How do I get the info from within the resize back to the backbone view?
如何从调整大小范围内的信息回到主视图?
self
is the global window
object, and this
is the JQuery result from the selector of this.el
. self
是全局window
对象, this
是this.el
选择器的JQuery结果。
define([ ... ], function( ... ){
return Backbone.View.extend({
// I also tried to use the event handlers from backbone
events : {
'resize' : 'info'
},
initialize: function(options){
if (options) { ... }
this.el = '#measure-rep-c55';
}
//Dispatch listeners
...
//Binding
this.model.bind('change', _.bind(this.render, this));
$(this.el).on('resize', this.info); // Here I am trying to attach the listener here according the API
this.render();
},
info: function(){
console.log('in info')
},
render: function(){
... //template and other stuff
// JQ-UI resizable
$(this.el).resizable({
aspectRatio: true,
start: function(e, ui) {
// alert('resizing started');
},
resize: function( event, ui ) {
// in here self = window
// and this is the JQuery object
var oldW = ui.originalSize.width;
var newW = ui.size.width;
var deltaWidth = newW - oldW;
var deltaRatio = deltaWidth/oldW;
//HOW TO SEND info (in this case var deltaRatio) back to the backbone view
//I tried getting to the function info() so that I could access the View itself from there
},
stop: function(e, ui) {
// alert('resizing stopped');
}
});
},
});
});
Don't create the listeners from within the resizable call, use the events hash to listen for the changes, then you have direct access to your view from the callbacks. 不要在可调整大小的调用中创建侦听器,请使用事件哈希来侦听更改,然后您可以从回调直接访问视图。
events : {
'resizestart' : 'start',
'resizestop' : 'stop',
'resize' : 'resize'
},
render: function(){
... //template and other stuff
// JQ-UI resizable
this.$el.resizable({
aspectRatio: true
});
},
start: function(e, ui) {
// alert('resizing started');
},
resize: function( event, ui ) {
// this is the View
var oldW = ui.originalSize.width;
var newW = ui.size.width;
var deltaWidth = newW - oldW;
var deltaRatio = deltaWidth/oldW;
},
stop: function(e, ui) {
// alert('resizing stopped');
}
You can use underscore to bind the view's 'this' to the event functions, which will give you access to the view itself. 您可以使用下划线将视图的“ this”绑定到事件函数,这将使您可以访问视图本身。 I typically separate the function bodies into their own functions like this:
我通常将函数体分成自己的函数,如下所示:
render: function() {
...
this.$el.resizable({
aspectRatio: true,
start: _.bind(this.didStart, this),
resize: _.bind(this.didResize, this),
end: _.bind(this.didEnd, this)
});
},
didStart: function() {
...
},
didResize: function() {
...
},
didEnd: function() {
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.