knockout.js与嵌套的foreach循环 [英] knockout.js with nested foreach loop

问题描述

我正在使用knockout.js 2.0，当我做一个嵌套的foreach循环时，性能非常慢。主循环有大约70条记录被返回，70个json记录中的数组包含0-20个项目。所以我觉得这不是很多JSON数据。

我只是测试下面的代码：

 < table> 
< tbody data-bind =foreach：Employees，visible：Employees（）。length> 0> 
< tr> 
< td class =centerdatadata-bind =text：ID>< / td> 
< td class =centerdatadata-bind =text：Name>< / td> 
< td> 
< table> 
< tbody data-bind =foreach：$ data.Transactions> 
< tr> 
< td data-bind =text：TransDate>< / td> 
< / tr> 
< / tbody> 
< / table> 
< / td> 
< / tr> 
< / tbody> 
< / table> 
  

该页面大约需要20秒才能加载。 json中有其他的字段，但为了简单起见，我把它们删除了。
$ b

谢谢，
Matt

我已经敲了一个小提琴，用你的标记有一些与你提到的类似大小的虚拟数据，并且在Chrome中性能是大约1秒。

http://jsfiddle.net/unklefolk/DCLaR/

是否有一个依赖的观察值正在反复计算？如果是这样，看看油门功能（http://knockoutjs.com/documentation/throttle-extender.html）

I am working with knockout.js 2.0 and when i do a nested foreach loop the performance is extremely slow. The main loop has about 70 records being returned and the array inside those 70 json records contain anywhere from 0 - 20 items. So i feel this is not alot of json data.

I am just testing with the below code:

    <table>
        <tbody data-bind="foreach: Employees, visible: Employees().length > 0">  
            <tr>                
                <td class="centerdata" data-bind="text: ID"></td>
                <td class="centerdata" data-bind="text: Name"></td>
                <td>
                   <table>
                       <tbody data-bind="foreach: $data.Transactions">  
                           <tr>   
                              <td data-bind="text:TransDate"></td>
                           </tr>
                       </tbody>
                   </table>
                </td>
            </tr>                    
        </tbody>
   </table>

The page takes about 20 seconds to load. There are other fields inside the json, but I have removed them for simplicity.

Thanks, Matt

解决方案

I think there must be something else going on here, Matthew.

I have knocked up a quick fiddle, using your markup with some dummy data of a similar size to what you mention and the performance is ~1 second in Chrome.

http://jsfiddle.net/unklefolk/DCLaR/

Is there a dependent observable that is being repeatedly calculated? If so, take a look at the throttle functionality (http://knockoutjs.com/documentation/throttle-extender.html)

这篇关于knockout.js与嵌套的foreach循环的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！