knockout.js - 加载时 Knockout JS 渲染

Question

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

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

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

每次更新都会延迟 1 毫秒并异步触发，因此不会阻塞您的 UI。我已经更新了你的小提琴，检查一下。