Friday, July 19, 2013

knockout.js

How this library sells itself?
  • Its not jQuery.  
  • It attaches to DOM level elements and all, however it doesn't provide a mechanism to traverse the DOM via selectors (like jQuery does) or via any other mechanism. 
So now the question comes...where then do you use it?

If you are a novice programmer, and you've just begin to like jQuery, chances are that you'd tend to build complex web pages without much concern on how to manage the huge amount of data your web page might be holding. There might be ajax callbacks which update the data, and subsequently you are writing code to add new DOM elements to the web page or update the existing DOM elements correspondingly.

However, when moving up from that novice state to a relatively more experienced state you'd begin to think if there is anything out there which would save you from updating DOM each time your data (or some part of it) updates or refreshes from the server...your experience might call out to you and say, no there’s got to be a better way to do this...enter knockout.js

Now this library is not a replacement for jQuery or any other library which serves to be a low-level DOM api. It is meant to complement it.

To really appreciate the power of knockout.js study the example below:

See the Pen ko example by arun.jayapal (@deostroll) on CodePen.


To simply add a new row to the table, I didn't have to write any DOM level api stuff like document.createElement, document.getElementById, or, go through the headache of appending it as a child of the students table element, etc.

Hope you've enjoyed the small example. Happy programming...

Hey!! Why not play around with the fiddle?! Try adding a delete functionality to this table and find out how easy that goes. You can paste a link to that fiddle in the comments below...