Home/ Questions/Q 7917921
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-03T15:19:27+00:00

I’m using knockout.js to render my view, I’m getting the data from the server

  • 0

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;

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0