Playing With Knockout.js

When I was in grade school we used to do these fun run things. Basically, we begged all of our family to give us money for every lap run. Then we would go run on the hot blacktop for 30 minutes. In exchange for all of this we were able to get stupid ribbons and prizes. It was anything but fun.

I'm not sure why this example popped into my head when it came time to create an example to show off the simplicity and power of Knockout.js. Regardless, it did and you can see the result below.

I like this example because it shows bindings to a couple of input types. The lap count at the top is multiplied by the Pledge Per Lap in each row. The values are summed across each row and down the columns.

Once you've played with my silly example, click on the html and js tabs and let the simplicity soak in. There is almost no code there. I didn't have to handle change and click events. I didn't need to do anything special when a row gets added to recalculate totals. Even the empty grid message was a snap, look at that easy visible binding! It. Just. Works.

What are you waiting for? Go read more about Knockout.js now.

2 Comments so far

  1. Jim Cowart @ April 15th, 2011

    Nicely done! Love how lean & clean the code is…

  2. Andrew @ April 27th, 2011

    Hi,
    Nice example, however, is it broken? I tried to add a sponsor and it didn’t do anything.

Leave a reply