Ember.js Evented Controller triggering an event

Question

I am trying to trigger an event from an Ember.js controller so the listening views can update themselves. Here is the Coffeescript.

window.CMS.EdmController = Ember.ObjectController.extend Ember.Evented,
  actions:
   save_edm: ->
     postData = $('#edm_form').serialize()
     $.ajax(
       url: 'cms2/update_edm',
       type: 'POST',
       data: postData
       )
       .done ->
         console.log(@)
         @trigger('saveEdmSuccessful')

It fails with an error Object #Object has no method trigger. The @ in the .done function refers to the jQuery post object and not the controller.

How do I get the reference to the parent controller object from inside a jQuery callback?

Any guidance would be appreciated.

Sunny R Gupta · Accepted Answer · 2014-03-16T08:57:06.967

I did try to compile your Coffeescript and ended up getting the following code as output:

window.CMS.EdmController = Ember.ObjectController.extend(Ember.Evented, {
  actions: {
    save_edm: function() {
      var postData;
      postData = $('#edm_form').serialize();
      return $.ajax({
        url: 'cms2/update_edm',
        type: 'POST',
        data: postData
      }).done(function() {
        console.log(this);
        return this.trigger('saveEdmSuccessful');
      });
    }
  }
});

And the solution to the problem you are facing is not related to ember.js, but the way Javascript closures work. A solution to the above problem would be:

window.CMS.EdmController = Ember.ObjectController.extend(Ember.Evented, {
  actions: {
    save_edm: function() {
      var postData;
      postData = $('#edm_form').serialize();
      return $.ajax({
        url: 'cms2/update_edm',
        type: 'POST',
        data: postData
      }).done($.proxy(function() {
        console.log(this);
        return this.trigger('saveEdmSuccessful');
      },this));
    }
  }
});

Notice how I've replaced your .done handler from a function call to a proxy call. This makes sure that when the callback is executed, the context is updated to reflect the current this.

To understand further about the behaviour of this in JavaScript, read this article.

For your reference, here is the CoffeeScript equivalent of my solution:

window.CMS.EdmController = Ember.ObjectController.extend Ember.Evented,
  actions:
   save_edm: ->
     postData = $('#edm_form').serialize()
     $.ajax(
       url: 'cms2/update_edm',
       type: 'POST',
       data: postData
       )
       .done(
          $.proxy ->
            console.log(@)
            @trigger('saveEdmSuccessful')
          @
       )

Sunny Fantastic help. Thanks. As I read your comment I realized Coffeescript has a different method invocation for class context. .done: => instead of .done: -> would call the method in the class context. I will try both and update in a short while. Thanks again. — Anand S, Mar 16 '14 at 23:39
Sunny, both approaches worked. $done: => executed the method in the class context. — Anand S, Mar 17 '14 at 00:43

Ember.js Evented Controller triggering an event

1 Answers1