knockout.js with nested foreach loop

Question

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

Take a look at this thread: github.com/SteveSanderson/knockout/pull/272 and try testing your app with the latest KO version from github: github.com/SteveSanderson/knockout/tree/master/build/output. You should see some decent improvements that will be included in KO 2.1. — RP Niemeyer
– RP Niemeyer, Commented Jan 23, 2012 at 14:47
We tried using the latest knockout and also name templated both foreach loops, but the performance is still the same. — Matthew
– Matthew, Commented Jan 23, 2012 at 15:11

Mark Robinson · Accepted Answer · 2012-01-24 13:11:40Z

1

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)

answered Jan 24, 2012 at 13:11

Mark Robinson

13.3k13 gold badges66 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

knockout.js with nested foreach loop

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related