Ember.js Evented Controller触发事件

时间:2014-03-15 11:24:35

标签: javascript jquery ember.js coffeescript evented-io

我正在尝试从Ember.js控制器触发事件​​,以便侦听视图可以自行更新。这是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')

失败并显示错误Object #Object没有方法触发器。 .done函数中的@是指jQuery post对象而不是控制器。

如何从jQuery回调中获取对父控制器对象的引用?

任何指导都将不胜感激。

1 个答案:

答案 0 :(得分:2)

我确实尝试编译你的Coffeescript并最终得到以下代码作为输出:

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');
      });
    }
  }
});

您遇到的问题的解决方案与ember.js无关,但与Javascript闭包的工作方式无关。解决上述问题的方法是:

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));
    }
  }
});

注意我是如何将.done处理程序从函数调用替换为代理调用的。这可确保在执行回调时,更新上下文以反映当前的this

进一步了解this在JavaScript中的行为read this article

供您参考,以下是我的解决方案的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(
          $.proxy ->
            console.log(@)
            @trigger('saveEdmSuccessful')
          @
       )