Unobtrusive Data-Binding for Knockout.js

If you're a web developer who has yet to see Knockout, go take a look. I'll wait... Knockout is an incredible library, I just love it. Though I prefer to keep my presentation layer clean and now it's sprinkled with little bits of code for the data-binding. And that is how this Plugin came to be. It solves that problem with an easy way to Unobtrusively Data-Bind your presentation layer.

Obtrusive example (taken from knockoutjs.com)

You'll notice in this example, information about how to perform the data-binding is married to the presentation layer.

The Advantages / Why

Complete separation of code from your presentation layer -- There are many reasons why you might want this: Code can be kept in separate js files (think of caching), designers can now modify the html without worry of breaking it, etc. Elimination of magic strings-- Complex data-binding can be difficult to maintain with magic strings, especially when you start using functions or events. In the following example, I took the data-bound element from above and added a click event. Without the Unobtrusive approach, you'd have to encode that function into your magic string.