2

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

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

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

4

1 回答 1

8

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

Ember.subscribe用于设置之前和之后的侦听器——事件以句点命名，因此订阅“render”将使您获得所有渲染检测调用，默认情况下类似于“render.boundHandlebars”、“render.metamorph”、“渲染.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 应用程序并单击所有/已完成/活动过滤器时，这是 chrome 中的输出（也应该在 firefox/firebug 中工作）

在此处输入图像描述

于 2013-02-28T06:43:10.647 回答