Наблюдайте события рендеринга

Question

Есть ли события, которые я могу наблюдать, подобно событиям данных ember-данных, которые связаны с загрузкой данных, например isLoaded/isUpdating, в то время как визуализируются представления/шаблоны?

У меня есть список из 1000 элементов, входящих в список, и для рендеринга (темы для всего другого вопроса) требуется довольно много времени. Я хотел бы показать некоторые указания пользователю о том, что выполняется работа рендеринга.

Есть события на более микрокосмическом уровне, такие как: http://emberjs.com/api/classes/Ember.View.html#event_willClearRender. Мне любопытно узнать, есть ли события, когда любой рендеринг выполняется.

Answer 1

Ember.Instrumentation обеспечивает универсальный способ кода прибора и, по умолчанию, Ember испускает события инструментария в любое время, когда что-то визуализируется.

Ember.subscribe используется для настройки прослушивателя до и после - события именуются периодами, поэтому подписка на «рендер» даст вам все визуальные вызовы, которые по умолчанию похожи на «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(); 

Heres выход в хроме, когда я вставить его в приложение TodoMVC и нажмите на все/завершенные/активные фильтры (должен работать в Firefox/поджигатель а)