我有一个视图,不是窗口的大小,也不是窗口本身,当它调整大小时,我想比较调整大小的开始和结束值。然而,JQ-UI的resize ui对象仅包含前一个状态,而不是原始状态,因此它只是按像素抓取更改(虽然我认为这是因为我将代码放在resize函数中,而不是end函数,但是这不是真正的问题,因为一旦我知道如何将var恢复到Backbone View本身就可以解决它。如何从调整大小中获取信息回到主干视图? 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');
}
});
},
});
});
答案 0 :(得分:5)
不要在可调整大小的调用中创建侦听器,使用events hash来侦听更改,然后您可以从回调中直接访问视图。
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');
}
答案 1 :(得分:0)
您可以使用下划线来绑定视图'这个'到事件函数,它将使您可以访问视图本身。我通常将函数体分成它们自己的函数,如下所示:
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() {
...
}