生成 knockout.js 模板时浏览器没有响应答案

【问题标题】：Browser not responding while knockout.js templates are generated生成 knockout.js 模板时浏览器没有响应
【发布时间】：2012-10-23 17:48:20
【问题描述】：

我希望我的浏览器可以立即访问，而无需等待加载模板。目前，当我提供一个大数组（在本例中为 1000 个元素）时，情况并非如此。我尝试使用External Template Engine，但这只会导致模板显示“正在加载...”，并且浏览器在加载完成之前没有响应。

为了说明，一个简短的例子：

JS：

function User(firstname, lastname) {
    this.firstname = ko.observable(firstname);
    this.lastname = ko.observable(lastname);
}

function UserViewModel() {
    this.allUsers = ko.observableArray([
        new User("John", "Doe"),
        new User("John", "Doe"),
        new User("John", "Doe"),
        // 1000 elements ...
        new User("John", "Doe")
    ]);
}

ko.applyBindings(new UserViewModel());

HTML：

<html>
    <head>
    ...
    </head>

    <body>

        <ul data-bind="template: { name: 'my-template', foreach: allUsers() }"></ul>

        <script type="text/html" id="my-template">
            <li>
                <h1 data-bind="text: firstname()"></h1>
                <h2 data-bind="text: lastname()"></h2>
            </li>
        </script>

    </body>
</html>

所以基本上我想要的是在模板渲染时可以访问浏览器，并且一旦它们准备好它们就应该被可视化。前面提到的外部模板引擎不能满足我的需求。

【问题讨论】：

标签： knockout.js

【解决方案1】：

您可能想尝试这种方法：

Show progress bar while knockout is rendering the view

如果您查看链接的 jsFiddle (http://jsfiddle.net/rniemeyer/fdSUU/)，您将看到正在使用的方法。

您基本上从一个单独的数组中的数据开始，然后通过setTimeout 调用一次将它们加载到数组中，例如 50 个项目。这会在数据加载时保持浏览器处于活动状态。

【讨论】：

谢谢。使用“常规”数据，这确实有效，但是当我使用自定义对象（例如主题帖子中的 User 对象）时，这仍然无法正常工作（可能是因为附加了 ko.observable() ） .
是的，你是对的。我错误地将 numToPush 变量设置为初始数组长度，但在查看代码后，这显然不是正确的做法。您认为 10 是这里的最佳选择吗，或者我也可以将其更改为例如 1？
是的，您可以更改 10。也许将其更改为与填充屏幕所需的项目数相匹配的数字。然后用户将尽快获得视觉反馈，然后页面可以继续渲染其其余内容。如果您将其更改为 1，这将起作用，但可能会影响页面性能。