Interacting with jQuery events in Ember.js Views

interacting_jquery.js

// jQuery event handler in the View

didInsertElement: function () {
  var self = this;
  this._boundApplyResize = function(){
    self.applyResize();
  }
  $(window).on('resize', this._boundApplyResize);
},

willDestroyElement: function(){
  $(window).off('resize', this._boundApplyResize);
}

// When to use Ember.run

fade: function(opacity, callback) {
  var self = this;
  var currentOpacity = this.$().css('opacity');
  if (currentOpacity === opacity){
    return callback();
  }
  
  this.$().css('opacity', opacity);
  this.$().on('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd', function(){
    self.$().off('transitionend webkitTransitionEnd oTransitionEnd otransitionend MSTransitionEnd');
    Ember.run(function(){
      callback();
    });
  });
}