How do I make my items in my ArrayController listen to an event from a third party API?

Question

I want my items in my ArrayController to listen to

FB.Event.subscribe('edge.create', function(response){
  Ember.Instrumentation.instrument("facebook.like", response);
})

I'm making use of the a seperate itemController.

Like2win.ContestsController = Ember.ArrayController.extend({
  itemController: "contest",
});
Like2win.ContestController = Ember.ObjectController.extend({
  init: function() {
    this._super();
    instance = this;
    Ember.subscribe("facebook.like", {
      before: function(name, timestamp, payload) {
        instance.send('onLike', payload);
      },
      after: function(name, timestamp, payload) {
        //
      }
    })
  },

For some reason only the last item in my array ends up listening to the event. I'm just starting out with Emberjs so I expect the answer to be simple.

Answer 1

Ember.Instrumentation is a simple software instrumentation api. It's purpose is performance profiling, tracing, not application level event dispatching.

You can see this api in action by setting Ember.STRUCTURED_PROFILE to true. This will start logging the render times for all templates rendered to the DOM by ember.

The specific issue you are having deals with how the Ember runloop works. The after hooks are only fired once with the last context given. This is done to ensure that multiple property changes of the same property do not result in re-rendering the DOM that many times. So the last property change on the runloop wins and the DOM updates with that property value.

What you really need to do is just translate the FB.Event of type edge.create into an application event that your app understands, something like `facebookLike', similar to what you have done above.

I would do this in the enter hook of your ContestRoute. Further exiting from the ContestRoute should probably unsubscribe from this event. So you probably need an unsubscribe in the exit hook.

enter: function() {
  var self = this;
  FB.Event.subscribe('edge.create', function(response) {
    self.get('controller').send('facebookLike', response);
  });
}

exit: function() {
  // unsubscribe from edge.create events here
}

Then you can handle this event in your ContestController like so,

facebookLike: function(response) {

}