I tweeted yesterday that I was having trouble with EmberJS and ReactiveJS integration.
I’m hip-deep in an emberjs app and I can’t get my canvas to pump events through rxjs…
— Brian J Ball (@Myotherpants) June 3, 2014
Well, I figured it out! With some help from the fine ReactiveX folks.
The long story short is RxJs is smart about Ember, and there are consequences.
- Use the Ember.View, not the HTML Dom element.
- Use the Ember event names, not the DOM event names.
Yeah, it boiled down the the difference between
mousedown and mouseDown. Did you catch the capitalization of the D? I never even thought to look…
So, what’s it look like in the end?
App.CanvasView = Ember.View.extend({ tagName: 'canvas', didInsertElement: function(){ this.subscription = Rx.Observable.fromEvent(this, 'mouseDown') .subscribe(function(e){ console.log("x="+e.offsetX + " y="+e.offsetY); }); }, willDestroyElement: function(){ this.subscription.dispose(); } });And now to start the magic of using RxJs.
update
I still think there is one thing left. I’ll try and test it out and add a Pr in a bit, but it seems to be important for my situation.
If I look at line 124 and 125 of fromEvent.js, I see an unused argument. I passed that through to the ember listener calls.
if (ember) { return fromEventPattern( function (h) { Ember.addListener(element, eventName, h); }, function (h) { Ember.removeListener(element, eventName, h); }, selector); }update 2
I submitted a pull request. I hope I’m right about this, or I’ll be beet-red.
This post was originally published here: https://myotherpants.com/2014/06/a-quick-note-on-emberjs-and-reactivejs/
