Ember - Handling clicks outside of view

Question

Wondering if anyone has come up with a better way for handling a click outside a div while using Ember? I know of the jQuery way with a global click handler that you must specify each action to take for certain instances, but am hoping someone has come up with a way to declare this inside an Ember view. As well, I tried the ol' give a div a tab index and use the on blur, but Ember actions don't seem to allow this.

Answer 1

Thanks for the input. I went back and read the documentation on jQuerys .on again. I was not aware that you could namespace the event. So I took both of the comments and combined them with something like this.

didInsertElement: function() {
    Ember.run.next(this, 'attachClickHandler');
},

attachClickHandler: function (){
    var temp = this;

    $(window).on("click." + temp.elementId, function (e){
        //...event here
    });
},

detachClickHandler: function (){
    $(window).off("click." + this.elementId);
},

This allows for the event to be specific for each view instance, which is what I was wanting. Thanks guys!

Answer 2

you may find ClickElsewhereMixin useful

just include the mixin on any component and implement onClickElsewhere()