Knockout JS Render While Load

如果您有一個列表和一個計數標籤。當每個項目被推入視圖模型數組中時，如何渲染每一行並使用新的計數實時增加標籤？Knockout JS Render While Load

對於我來說，顯示的列表保持空白，計數爲0，並且在viewmodel數組被填充時整個UI被阻塞，然後當每個項目被推入數組時，列表中的所有行只是突然顯示與計數標籤中的最後一個數字。

2012-07-30 John McMillion

想向我們展示您的代碼？有辦法做到這一點，但它將取決於你如何填充你的數組。 – Tyrsius 2012-07-30 23:05:58

你可以顯示你到目前爲止沒有工作的代碼嗎？ – 2012-07-30 23:07:08

很難將我的代碼抽象出來......希望我的描述有意義......我將Knockout樣本複製到小提琴中，調整它以加載一些數據。您可以看到用戶界面被封鎖，並且如果您點擊添加禮物按鈕，它會一次渲染。 http://jsfiddle.net/johnmcmillion/YnHQj/ – 2012-07-31 01:10:36

因爲JavaScript是單線程的，所以你的UI被阻塞是非常合乎邏輯的。因此，使用foreach會阻止腳本的其他執行。

快速修復此問題將使用setTimeout來延遲代碼塊的執行。例如，如果你使用：

for (var i=0;i< totalGifts;i++) { 
    setTimeout(function(){ 
     self.gifts.push({name: "New Gift " + i, price: "New Price: " + i}); 
    },1);    
}

每個更新將被觸發1ms延遲和異步，因此不會阻止你的用戶界面。我已經更新了你的小提琴，check it out。

來源

2012-07-31 07:42:47 thomaux

Knockout JS Render While Load

回答

相關問題