Home/ Questions/Q 8317501
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-08T21:37:30+00:00

I’m trying to create a simple markup with templates. Something like: <div class=list data-bind=template:

  • 0

I’m trying to create a simple markup with templates. Something like:

<div class="list" data-bind="template: {name: 'mytemplate', data: someData}"></div>

<script id="mytemplate">
  <div class="item" data-bind="text: someText"></div>
</script>

It works very nice, but if i need to render a lot of divs with this templates its going to be very slow. Knockout after creating each div adds it to the document. But, if i do something like this:

el = document.createElement("div");
applyBindings(myModel, el);

(div.list).innerHTML = el.innerHTML

It works much faster but is inconvenient.

Maybe Knockout has some built in feature for creating a group of element and after that adding this group to the document?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It sounds like KO is manipulating the DOM with each DIV you add. DOM traversal is expensive and will slow down the rendering of your page. There is an open issue for this under the KO Github: https://github.com/SteveSanderson/knockout/issues/248

    In my opinion, Knockout is presently not up to the task of handling large foreach data sets. Performance on Chrome is decent (because Chrome is awesome), but pretty bad on Internet Explorer (and even worse on older IE): http://jsfiddle.net/StarcounterJack/FgSCw/

    Instead of using Knockout, try a manual approach: create the DIVs in memory first and insert them into the DOM all at once. This is what you’re doing in your second example with document.createElement(). With jQuery, you could do this:

    var newDiv = $("<div>my new div</div>");
var newDiv2 = $("<div>my new div2</div>");
newDiv.append(newDiv2);
$('body').append(newDiv); //only this last step traverses the DOM

    For templating, I prefer to use Mustache.js, load the templates using John Resig’s <head><script type="text/templates"> template inclusion trick and take care of the rendering manually through my own JavaScript. You have more control over how the elements are rendered and can try different approaches when you run into performance problems like the one you have now.

    • 0