2

Are there events that I can observe, similar to ember-data's events around data loading such as isLoaded/isUpdating, for while view/templates are being rendered?

I have a list of ~1000 elements going into a list, and it takes quite some time to even render (the topic of a whole other question). I'd like to show some indication to the user that rendering work is being done.

There are events at a more microcosmic level such as: http://emberjs.com/api/classes/Ember.View.html#event_willClearRender. I'm curious to know if there are events for when any rendering is being performed.

4

1 に答える 1

8

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 アプリに貼り付けて all/completed/active フィルターをクリックすると、Chrome で出力されます (firefox/firebug でも機能するはずです)。

ここに画像の説明を入力

于 2013-02-28T06:43:10.647 に答える