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.