JQuery UI可调整大小调整事件绑定/调整大小事件到主干视图

我有一个视图，不是窗口的大小，也不是窗口本身，当它调整大小时，我想比较的开始和结束值调整。然而，JQ-UI的调整ui对象的大小只包括以前的状态，而不是原始状态，所以它只是通过像素来获取更改（尽管我认为这是因为我将代码放在resize函数中，而不是最终函数，但是不是真正的问题，因为一旦我知道如何将var返回到Backbone View本身，我就可以解决它）。如何将调整大小内的信息返回到骨干视图？ self是全球的window对象，并且this是选择器this.el的JQuery结果。JQuery UI可调整大小调整事件绑定/调整大小事件到主干视图

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'); 
     } 
     }); 
    }, 
    }); 
});

来源

2013-08-22 chris Frisina

不要从调整大小调用中创建的监听器，使用事件哈希监听的变化，那么你必须从回调您的视图直接访问。

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'); 
}

来源

2013-08-22 21:07:03 Andrew

我没有得到这个工作，但它帮助我走向正确的方向。我非常感谢你的解释！我最终在通话中设置了范围。我不知道我为什么（或者我的团队无法让你的例子在我们的工作）。再次感谢！ –

@chrisFrisina现在我再次查看你的代码，很可能是因为你搞乱了初始化。你不应该在初始化方法中设置'this.el'。它在建造时应该通过。这可能是很多事情无法正常工作的原因。 – Andrew

您可以使用下划线将视图的'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() { 
    ... 
}

来源

2014-03-25 19:09:16 SeanK

JQuery UI可调整大小调整事件绑定/调整大小事件到主干视图

回答

相关问题