knockoutJS causing stop script errors with nested foreach

Question

I'm using knockout.js to render my view, I'm getting the data from the server and binding like this..

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

My view...I've trimmed a few bits out...but binding are the same...

<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>

The data contains an array of objects and in each of those objects another array... There are about 500 items that need to be rendered.

While I've been testing I have experienced no problem, but when deployed, whether it be slow pc's i dont know, but they are getting a "This Script is peforming slow - stop?" message. If you click "No" a couple times it will render.

What are the techniques of dealing with big datasets in knockout? Ideally I'd like the rendering to be done async and let the user carry on with their thing while its busy working away...

The properties dont actually need to be observable - this is a 1 time render...nothing will change. I'm using the mappings API for ease.

UPDATE: OK, so I've made a change and not using the mapping api anymore - the page is loading, but still slowly...any ideas? Change: var viewModel = data;

I have some customers complaining about my knockout based web site being slow on older macs in safari 4. Have not figured it out yet. What browser(s) are your users using? — Roman Bataev, Apr 24 '12 at 13:32

score 2 · Accepted Answer · answered May 12 '12 at 13:12

The click event is being triggered for every element. This has happened to me before.

Regarding what a previous poster said re: binding 500 elements on a page, I've had to bind 500+ elements on a page before, and the performance cost is almost negligible on more modern browsers (you may see some slowdown on Ie 7-8, but not too bad). I would advise not using the mapping plugin when converting a large json object. KO mapping compares each element to every other element (to check for uniqueness), so you can see why convertig 500 items would slow it down.

score 0 · Answer 2 · answered Apr 24 '12 at 15:42

0

I think showing 500 items on a page is not a very good idea from UI perspective. Maybe you should only show top level items and have links "Show comments" and only render comments when requested by user. Or only render first X top level items with subitem and have link "Show more". Or use a combination of the above techniques. That's my plan of addressing the same issue on my website anyway.

answered Apr 24 '12 at 15:42

Roman Bataev

9,287
2
21
15

Thanks - unfortunately that's not my call to make! And the UI has been well designed. I have recommended a couple of approaches...I have to say though they are very small items...and 500 of these doesn't really seem that many. I've actually approached it from another angle...making a few ajax calls and using deferred objects in jQuery...it's still not perfect, but it does just load away whilst not holding the UI ransom. – SteveCl Apr 24 '12 at 16:27

knockoutJS causing stop script errors with nested foreach

2 Answers2