3

我希望我的浏览器可以立即访问，而不必等待加载模板。目前，当我提供一个大数组（在本例中为 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>

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

4

1 回答 1

3

您可能想尝试这种方法：

淘汰赛渲染视图时显示进度条

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

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

于 2012-10-17T14:40:30.110 回答