Tuesday, April 24, 2012

Knockout and Click-to-Edit

Knockout is lots of fun to work with.  It uses the MVVM pattern to drastically simplify javascript - you no longer have to mess around with finding elements and updating them or retrieving values from elements.  All you have to do is work with a viewmodel and the DOM is kept in sync automatically.  Here is a small example of one of the fun things I made with knockout recently.

I needed to implement click-to-edit for an element on a page that is bound to a Knockout viewmodel. The idea with click-to-edit is that you see text on a webpage, and when you click it, you are able to edit it, then when you click away, the edit box goes away.  You can see it in action on the Result tab below: