A quick note on EmberJs and ReactiveJS

work safe

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.

1 Comment

No Comments

1 Trackback

Leave a Reply

Allowed tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>