Question

我正在使用knockout.js来渲染我的视图，我从服务器获取数据并像这样绑定..

var viewModel = ko.mapping.fromJS(data);
ko.applyBindings(viewModel, $("#macro-wrapper")[0]);

我的观点......我已经修剪了几个......但是绑定是一样的......

<div data-bind="foreach: Data">
<h3>
    <a href="#" data-bind="text: Site.Name"></a>
</h3>
<div id="">
    <div data-bind="foreach: Comments">
        <div class="">
            <div class="" data-bind="click: $root.showContent">
            <a ></a>
            </div>
            <span>
                <a data-bind="attr: { 'href': Url }, text: SomeText"></a>
            </span>
            <span class="">
                <span class="" data-bind="text: ADate"></span>
            </span>
        </div>
    </div>
</div>

数据包含一个对象数组，并在每个对象中包含另一个数组...... 大约需要渲染500件物品。

虽然我一直在测试，但我没有遇到任何问题，但是在部署时，是否它是慢速的我不知道，但是他们得到了“这个脚本慢慢停止 - 停止？”信息。如果您单击“否”，它将呈现几次。

在淘汰赛中处理大数据集的技巧是什么？理想情况下，我希望渲染完成异步，让用户继续忙着工作......

这些属性实际上并不需要是可观察的 - 这是一次渲染......没有什么会改变。我正在使用映射API。

更新：好的，所以我做了一个更改而不再使用映射api - 页面正在加载，但仍然很慢......任何想法？更改：var viewModel = data;

Answer 1

正在为每个元素触发click事件。这件事发生在我之前。

关于以前的海报所说的：在页面上绑定500个元素，我之前必须在页面上绑定500多个元素，并且在更现代的浏览器上性能成本几乎可以忽略不计（你可能会看到一些减速即7-8，但不是太糟糕）。我建议在转换大型json对象时不要使用映射插件。 KO映射将每个元素与每个其他元素进行比较（以检查唯一性），因此您可以看到为什么convertig 500项目会降低它的速度。

Answer 2

我认为从UI角度来看，在页面上显示500个项目并不是一个好主意。也许您应该只显示顶级项目并且具有“显示评论”链接，并且仅在用户请求时呈现评论。或者仅使用子项目渲染第一个X顶级项目，并且链接“显示更多”。或者结合使用上述技术。这是我计划在我的网站上解决同样的问题。

knockoutJS导致嵌套foreach停止脚本错误

2 个答案: