1

ウィンドウのサイズやウィンドウ自体ではなく、ビューがあり、サイズを変更するときに、サイズ変更の開始値と終了値を比較したいと考えています。ただし、JQ-UI の resize ui オブジェクトには元の状態ではなく、前の状態のみが含まれているため、変更をピクセル単位で取得しているだけです (コードを end 関数ではなく resize 関数に入れているためだと思いますが、 var を Backbone View 自体に戻す方法がわかれば解決できるので、本当の問題ではありません)。サイズ変更内からバックボーン ビューに情報を取得するにはどうすればよいですか? selfはグローバルwindowオブジェクトでありthis、 のセレクターからの JQuery の結果ですthis.el。

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

2 に答える 2

5

サイズ変更可能な呼び出し内からリスナーを作成しないでください。イベント ハッシュを使用して変更をリッスンすると、コールバックからビューに直接アクセスできます。

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-22T21:07:03.030 に答える
0

アンダースコアを使用して、ビューの「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-25T19:09:16.440 に答える