2013-01-16 59 views
0

我正在使用knockoutjs 2.2與延期更新插件。我通過Ajax從服務器加載大量數據,並使用它來實例化一堆對象(例如,大約5K個對象,每個對象都有6個屬性),其中一些將以HTML格式呈現。整個過程需要10-20秒,但我不確定時間在哪裏,淘汰賽是否正在做額外的工作,它不應該這樣做。如何查看knockoutjs更新?

JSON結構的轉移和創建相對較快;我添加了計時調用來測量從JSON數據創建我的數據圖。我現在想要做的是測量knockoutJS計算ko.computed值並應用綁定的時間。我怎麼做?什麼觸發了更新(在視圖模型被填充時已被延遲),以及如何將它括起來來衡量花費多長時間?

回答

1

您可以創建記錄時間的自定義綁定。這裏有一個例子:http://jsfiddle.net/mbest/WTYhs/

var startTime = new Date().getTime(); 
ko.bindingHandlers.logTime = { 
    reset: function() { 
    startTime = new Date().getTime(); 
    }, 
    init: function(element, valueAccessor) { 
    var value = valueAccessor(); 
    console.log(value.msg + ' init: ' + (new Date().getTime() - startTime) + ' ms'); 
    }, 
    update: function(element, valueAccessor) { 
    var value = valueAccessor(); 
    if (typeof value.track == 'function') 
     value.track(); 
    console.log(value.msg + ' update: ' + (new Date().getTime() - startTime) + ' ms'); 
    } 
}; 
+0

不知道如何做到這一點的多觀測和計算的值屬於同一視圖模型的一部分工作。 –

+0

此外,這似乎是測量從某個開始時間到評估init和update方法的時間差異,但是它捆綁了各種其他內容,而不是更新視圖所需的時間。我還不清楚當observable在小提琴示例中被評估時:是否首先評估'text:obs1'綁定,然後是'logTime'綁定?或者相反呢?總之,我不太清楚如何用'logTime'綁定來裝飾一個複雜的應用程序,以及如何正確地重新啓動時鐘以分離不同的重繪事件。 –

+0

綁定按從左到右的順序進行評估(請參閱http://knockoutjs.com/documentation/binding-syntax.html#notes_for_multiple_bindings_on_a_single_element)。你可以添加一個函數來重置'startTime'。我更新了示例以顯示此內容。 –