A quick note on EmberJs and ReactiveJS

I tweeted yesterday that I was having trouble with EmberJS and ReactiveJS integration.

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.

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.

COMPOSE ALL THE EVENTS

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: http://myotherpants.com/2014/06/a-quick-note-on-emberjs-and-reactivejs/

The following two tabs change content below.

Latest posts by Brian Ball (see all)

Add your comment

Your email address will not be published.