ember.js - 如何让 ArrayController 中的项目监听来自第三方 API 的事件？

Question

我希望 ArrayController 中的项目能够监听

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

我正在使用单独的 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) {
        //
      }
    })
  },

出于某种原因，只有数组中的最后一项最终监听该事件。我刚刚开始使用 Emberjs，所以我希望答案很简单。

Answer 1

Ember.Instrumentation是一个简单的软件instrumentation API。其目的是性能分析、跟踪，而不是应用程序级事件调度。

您可以通过将 Ember.STRUCTURED_PROFILE 设置为 true 来查看此 API 的运行情况。这将开始记录由 ember 渲染到 DOM 的所有模板的渲染时间。

您遇到的具体问题涉及 Ember runloop 的工作原理。 after Hook 仅在给定最后一个上下文时触发一次。这样做是为了确保同一属性的多个属性更改不会导致多次重新渲染 DOM。因此，runloop 上的最后一个属性更改获胜，并且 DOM 会使用该属性值进行更新。

您真正需要做的只是将 edge.create 类型的 FB.Event 转换为您的应用程序可以理解的应用程序事件，例如“facebookLike”，与您上面所做的类似。

我会在 ContestRoute 的 enter Hook 中执行此操作。进一步退出 ContestRoute 可能应该取消订阅此事件。因此，您可能需要在 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
}

然后您可以像这样在 ContestController 中处理此事件，

facebookLike: function(response) {

}