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可調整大小調整事件綁定/調整大小事件到主幹視圖

回答

相關問題