KnockedUp: Customizing the use of KnockoutJs

I blogged previously about a nifty little library called KnockoutJs.

To bring you up to speed, here is a typical example on the original usage of KnockoutJs:

Note that you have to specify all your bindings for an element in the data-bind attribute.

This got me thinking...

Doing all these bindings in one attribute may become untidy and unreadable. On the HTML, I wanted a way to explicitly define my bindings as attributes on a specific element.

...then KnockedUp was born

I created a library (dependent on JQuery & KnockoutJs) that gives you the same result as KnockoutJs and called it KnockedUp :) .

MVVM for the Web using Knockout.js

Ever since the explosion of web-oriented apps, the need for doing complex things simpler becomes more obvious. Creating richer & more sophisticated UI's usually involves using JavaScript API's like JQuery.

What?

Knockout.js is an open-source JavaScript library (yep, not Microsoft - licensed under the MIT) that helps you create rich, responsive display & editor user interfaces with a clean underlying data model.

Any time you have sections of your UI that update automatically, Knockout.js can help you implement it in a simpler, more maintainable fashion.

Why?

The problem with designing for the web is that rich user interactivity is fairly hard to do. Even when using a JavaScript library (like JQuery) it can become quite cumbersome. Before you know it, you have a mess of inter-related event handlers that all pretty much do the same thing.

Now, with Knockout, we can say hello to more structured code based on true object orientation & declarative bindings. This means that Knockout brings the MVVM pattern comes to the web.

Like any other good JavaScript library, Knockout also supports a wide variety of browsers like IE 6+, FireFox 2+, Chrome, Safari & Opera.

Knockout can be added on top of your existing web application without requiring major architectural changes.

Developers familiar with Ruby on Rails, ASP.NET MVC, or other MV* technologies may see MVVM as a real-time form of MVC with declarative syntax. In another sense, you can think of KO as a general way to make UIs for editing JSON data… whatever works for you :)

How?

The best way of explaining Knockout.js is to actually show you. In order to keep this post short & sweet and on to the point - here's a link to the interactive tutorials found on the website - knockoutjs.com

Also - I've uploaded an simple example based on my demo on SkyDrive here

Enjoy experimenting & happy knocking!

@FanieReynders