Ember.run.bind

09 May 2014

Ember has several great features that are not widely known, like its Dependency Injection system I wrote about last week.

It has also really handy API methods in hiding. One usually stumbles on them while looking for something in the superbly commented source code.

I hereby introduce such a handy method and hope to make that into a recurring thing. Who knows? Eventually this might also grow into a series.

If it does, I would have to find a catchy name for it. "Ember Chispas" came to mind and rings nice but unfortunately Jeffrey Biles already has a monopoly on it via his "Ember Sparks" series. (Chispa is Spanish for spark.) We'll have to talk, Jeffrey :)

Anyway, let's see the first thingie.

... and in the runloop bind them

The run loop in Ember deserves its own blog post series, and I am probably not the one who will write it. (The official guide on the subject is a good place to start, Alex Matchneer's "Everything You Never Wanted to Know About the Ember Run Loop" is more elaborate).

For the sake of this chispa, it suffices to state that any async callback from a 3rd party javascript library needs to be wrapped into an Ember.run.

Blatantly stealing the example from the source code, here is how this is done:

1var that = this;
2jQuery(window).on('resize', function(){
3  Ember.run(function(){
4    that.handleResize();
5  });
6});

See that beautiful var that=this;? It can be got ridden of via Ember.run.bind:

1jQuery(window).on('resize', Ember.run.bind(this, this.handleResize));

Less code to write and all the mustaches are gone (not that there is anything wrong with {{mustaches}}, of course).