Knockout JS渲染时加载

Question

如果您有一个列表和一个计数标签。当每个项目被推入viewmodel数组时，如何实时渲染每一行并使用新计数递增标签？

对我来说，显示的列表保持为空，计数为0，并且在viewmodel数组被填充时阻止整个UI，然后当每个项目被推入数组时，列表中的所有行都会突然显示计数标签中的最终数字。

Answer 1

您的UI阻塞是非常合乎逻辑的，因为JavaScript是单线程的。因此，使用foreach将阻止脚本执行的其余部分。

快速解决此问题的方法是使用setTimeout来延迟代码块的执行。例如，如果您使用：

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

每次更新都会被触发1ms延迟和异步，因此不会阻止您的UI。我已经更新了你的小提琴check it out。