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

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件需要被渲染。

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

什么是在淘汰赛中处理大数据集的技术？理想情况下，我希望渲染完成异步，并让用户在忙于工作时继续使用它们的东西...

属性实际上不需要可观察 - 这是1次渲染...没有什么会改变。我使用映射API来简化操作。

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

Answer 1

点击事件正在为每个元素触发。这发生在我以前。

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

Answer 2

我觉得从UI的角度来看，在页面上显示500项不是一个好主意。也许你应该只显示*项目，并有链接“显示评论”，并且只在用户请求时提供评论。或者只渲染前面有子项的X个*项目，并链接“显示更多”。或者使用上述技术的组合。 这是我在网站上处理同一问题的计划。