knockout.js - 読み込み中のノックアウト JS レンダリング

Question

リストとカウントのラベルがある場合。各アイテムがviewmodel配列にプッシュされるたびに、各行をレンダリングし、新しいカウントでラベルをインクリメントするにはどうすればよいでしょうか?

私にとっては、表示されるリストは空のままで、カウントは 0 であり、viewmodel 配列がいっぱいになるまで UI 全体がブロックされ、すべてのアイテムが配列にプッシュされると、リスト内のすべての行が最終的な数字とともに突然表示されます。カウント ラベルで。

Answer 1

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);            
}

各更新は 1 ミリ秒遅れて非同期でトリガーされるため、UI をブロックしません。フィドルを更新しました。チェックしてください。