UDPATE – This blog post refers to a performance issue in Knockout 1.3, the issue has since been resolved in Knockout 2.0

First I want to say I love knockout.js not just for it’s data binding but it’s combination of data binding with inline templates.

I ran into a problem today though I was using Knockout.js beta 1.3 and  the performance for 100+ object list was going really slow. But only on Chrome, it turned out to be a chrome issue (I’m using Chrome 16.0.912.63 m). The finally narrowed down the issue to be the performance of the innerText property specifically when you get the property.

To fix the issue I replaced Knockout’s built in text binding with my own and used jQuery’s text() function to set the innerText/textContent property. Here is the code for that binding (by the way it’s awesome that Knockout lets you replace their bindings).

ko.bindingHandlers['text'] = {
 'update': function (element, valueAccessor) {
  var value = ko.utils.unwrapObservable(valueAccessor());
  if ((value === null) || (value === undefined)) value = "";
  //typeof element.innerText == "string" ? element.innerText = value : element.textContent = value;
  $(element).text(value);
 }
};

Just wanted to add a quick note on what Knockout.js is and does:

I find inline templates much easier to follow and understand, because it keeps the HTML in tact it makes it very easy to work with the HTML given to you by a designer, since you practically don’t have to alter at all you can even leave in sample data.

You can also use other constructs like observables to automagically update your html as you change your objects. For example if you add more people to your model it’s automatically reflected on the screen. Also if you changed the name of the one of the people.