using custom jquery-events in ember.js

Question

I'm using a custom jQuery UI Plugin in my ember.js app, and would like to react on a custom jQuery event in order to update values of the controller/model.

What I found: A question asked for the same purpose here on stackoverflow gives as answer to use jQuery.bind()/[jQuery.on() in the the didInsertElement-function of the view. The use of jQuery.on() in the didInsertElement-Method of the view causes the problem that this inside the event Handler is bound to the Dom-Element it occurred on.

So ideally there would be a way to get other jQuery events to work like the ones that ember brings with it: Calling the matching method names on the Ember.View- Instance.

Do you know any way to get custom jQuery events to work? Possibly using an Mixin for creating the appropriate methods on the view or the like?

The jQuery UI integration by Luke and Yehuda (lukemelia.com/blog/archives/2012/03/10/…) btw. seems to only work with the build in jQUI widgets but not with custom ones created by the jQueryUI widget factory helper. — JanD
– JanD, Commented Apr 18, 2013 at 18:58

Luke Melia · Accepted Answer · 2013-04-21 06:53:29Z

1

It sounds like this is a Javascript issue, not a jQuery or Ember issue. Understanding and manipulating what "this" is bound to is one of the biggest learning curves in Javascript:

///...in the view
didInsertElement : function(){
    var view = this;
    this.$().zoomablebg(); //this is the name of the custom jQ UI-Plugin
    // the view variable now holds a reference to the ember view
    // and creates a closure so that you can refer to it in the event handler
    this.$().on("zoomablebgstopdrag", function(e){ view.zoomablebgstopdrag(e) });
},
zoomablebgstopdrag: function(b){
    console.log(this); //this refers to the view now. 
},
//more view code

Hope that helps!

edited Apr 21, 2013 at 6:53

answered Apr 19, 2013 at 12:36

Luke Melia

8,38935 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

JanD Over a year ago

Hmm, thanks. But the trouble is, this brings us further down in the field of jQuery/Javascript event problems. It fixes a problem while creating another: you can't unregister the function from on(), since it was created anonymously.

JanD Over a year ago

...but as I see now, the method to call a function on an ember view used in your jQueryUI integration (lukemelia.com/blog/archives/2012/03/10/…) can be used on any jQueryUI object created by the jQuery Widget factory. So I may just use this to trigger some function on the view.

Sephy Over a year ago

I know this is a bit old but I think it's still true : When you register an event listener like that in the didInsertElement, don't you have also to remove it in the onDestroy ?

Luke Melia Over a year ago

@Sephy yes, it should be removed in willDestroyElement

Collectives™ on Stack Overflow

using custom jquery-events in ember.js

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related