KnockoutJS and slow performance

I was having an issue where I was copying a batch of objects from one array to the other, which in turn caused a row in a table to be destroyed in one table and created in another for each object.  This was, of course, all being done with KnockoutJS and a KnockoutJS template.  This is not a teach-you post, it’s simply a point-you-in-the-right-direction post.  Bottom line, I created a computed array with Knockout that mirrored the original array, but with throttling set, as shown here:

    self.SelectedPolicyIDs = ko.observableArray();
    self.SelectedPolicyIDsThrottled = ko.computed(this.SelectedPolicyIDs).extend({ throttle: 50 });

Then, I bound the table to SelectedPolicyIDsThrottled instead of two SelectedPolicyIDs.  Behind the scenes, this keeps the DOM from being updated as each object is moved from one array to the other, and instead waits 50 milliseconds after the moves are completed, and the arrays have “settled”, before then updating the template.  Something to remember next time KnockoutJS and your DOM perform slowly.

Here is the Knockout documention regarding throttling. http://knockoutjs.com/documentation/throttle-extender.html

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

John West

John West is an independent technology consultant who specializes in using technology to improve business processes.  That means that technology for its own sake isn't worth much; it's value only comes from helping people do things better, cheaper and faster.

That said, he spends way too much time testing cutting-edge gadgets that often come with promises of making things better and faster, but often fail to live up to those promises.  And they usually fail on the cheaper front as well.

Month List

Page List