觀察渲染事件

Question

是否有可以觀察到的事件，類似於正在渲染視圖/模板時與數據加載相關的ember-data事件，如isLoaded/isUpdating？

我有一個進入列表的1000個元素的列表，它需要相當一段時間才能渲染（整個其他問題的主題）。我想向用戶展示渲染工作正在完成的一些跡象。

在微觀層面上還有一些事件，例如：http://emberjs.com/api/classes/Ember.View.html#event_willClearRender。我很想知道是否有任何渲染正在執行的事件。

Answer 1

Ember.Instrumentation提供了一種通用的方法來測試代碼，並且方便，默認情況下，Ember會在渲染東西時發出檢測事件。

Ember.subscribeEmber.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(); 

繼承人鉻輸出，當我將其粘貼到TodoMVC應用，然後點擊全部/已完成/有源濾波器（應在Firefox/Firebug的工作以及）