Question

thanks in advance for looking at this.

Essentially, I’m calling didInsertElement() and binding an event to DOM $(document).on(...)

I’m trying to be a courteous developer and call $(document).off(...) by using willDestroyElement.

However, as I may have multiple things bound to $(document) i need to specify which function to remove. When I do this, jQuery hijacks Ember’s this with it’s own HTMLElement

JsFiddle: http://jsfiddle.net/brennan/H65Ax/

Is there a better way of doing this?

Answer 1

Modify your code like this:

didInsertElement: function(){
    var self = this;
    //storing `click` handler on new property `addedListener`
    $(document).off('click', self.addedListener = function(){
        self.set('isActive', false);
    });
},
willDestroyElement: function(){
    var self = this;
    $(document).off('click', self.addedListener);
},