Ember.js 观察渲染事件

在呈现视图/模板时，我是否可以观察到类似于ember data在数据加载（例如isLoaded/IsUpdate）方面的事件

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

---

有些事件是微观层面的，例如：。我很想知道在执行任何渲染时是否有事件。

Ember。Instrumentation

提供了一种通用的插入代码的方法，并且在默认情况下，Ember在渲染任何内容时都会方便地发出插入事件

Ember.subscribe

用于设置前后事件的侦听器——事件以句点命名，因此订阅“render”将获得所有渲染检测调用，默认情况下，这些调用类似于“render.boundHandlebar”、“render.变态”、“render.view”

这里有一个小功能可以帮助您开始。。您可以将其粘贴到控制台中，然后在应用程序周围单击以将其签出（或者如果您希望从一开始就查看所有渲染，请将其粘贴到代码中的某个位置，以便在余烬之后但在应用程序之前加载）

如果没有将任何事件传递给

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应用程序并单击all/completed/active过滤器时在chrome中的输出（在firefox/firebug中也应该可以使用）

---

为了清楚起见，我已经展示了一个类似的加载微调器，用于从适配器加载数据。这是一个极好的答案，也是一个极好的演示。非常感谢。我想接下来的问题是：显示/隐藏“微调器”是否适合使用此工具？感觉不是很像，但我可能错了。是的，考虑到我甚至不是100%确定Ember的产品构建包中包含了仪器（我认为是的，因为它在Ember metal中）。我想这取决于您在代码中的操作方式——这取决于一个具有“加载”属性的控制器，观察该属性以确定是否显示加载微调器——那么您如何更新该加载属性呢？你有选择。。如果需要，请覆盖View.render。。根据视图进行的任意数量的状态转换来执行此操作。。重写渲染缓冲区。。instrumentation…刚刚找到一篇关于此主题的优秀文章，请在此处查看：