观察渲染事件

Question

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

我有一个大约1000个元素的列表进入列表,甚至渲染(另一个问题的主题)需要相当长的时间.我想向用户显示渲染工作正在进行的一些指示.

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

Answer 1

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

Ember.subscribe 用于设置前后监听器 - 事件用句点命名,因此订阅"render"将获得所有渲染检测调用,默认情况下为"render.boundHandlebars","render.metamorph"," render.view"......

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

如果没有传递任何事件,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中的输出