观察渲染事件

Question

是否有我可以观察到的事件，类似于围绕数据加载的ember-data事件，例如isLoaded / isUpdating，用于渲染视图/模板？

我有一个大约1000个元素的列表进入列表，甚至渲染（另一个问题的主题）需要相当长的时间。我想向用户表明正在进行渲染工作。

有更微观层面的事件，例如：http://emberjs.com/api/classes/Ember.View.html#event_willClearRender。我很想知道是否存在执行任何渲染的事件。

Answer 1

Ember.Instrumentation提供了一种通用的方法来检测代码，并且方便地，默认情况下，Ember会在呈现某些内容时发出检测事件。

Ember.subscribe用于在之前和之后设置一个监听器 - 事件用句点命名，因此订阅＆＃34; render＆＃34;将为您提供所有渲染检测调用，默认情况下为＆＃34; render.boundHandlebars＆＃34;，＆＃34; render.metamorph＆＃34;，＆＃34; render.view＆＃34; ...

这里有一个很小的功能可以帮助你开始..你可以将它粘贴到控制台中并点击你的应用程序来检查它（或者如果你想看到所有的渲染从一开始粘贴它在某处你的代码所以它是在ember之后但在你的app之前加载的）。

如果没有事件传递给beginInstrumentation，则默认为render ...

beginInstrumentation = function(eventName) {
  var styles;
  if (eventName == null) {
    eventName = "render";
  }

  styles = {
    "render.render.metamorph": "color: #a47701;",
    "render.render.boundHandlebars": "color: #0f51fe;",
    "render.view": "color: #37be02;"
  };

  Ember.subscribe(eventName, {
    before: function(name, ts, payload) {
      console.group(name);
      return ts;
    },
    after: function(name, ts, payload, b_ts) {
      var elapsed, style;
      style = styles[name] || "";
      elapsed = (ts - b_ts).toFixed(4);
      console.log("%c" + payload.object + ": " + elapsed + "ms", style);
      return console.groupEnd();
    }
  });
};

beginInstrumentation();

当我将它粘贴到TodoMVC应用程序并单击所有/已完成/活动过滤器（也应该在firefox / firebug中工作）时，继承Chrome中的输出