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 :) .

KnockedUp allows you to specify your data-bindings explicitly as normal attributes and not as in line values of the "data-bind" attribute. What this library does, is converting the KnockedUp syntax to proper KnockoutJs syntax.

These attribute-based bindings must start with an identifier, in my case "ko-". You can then have your HTML as:

Choose a ticket class:
<select ko-options="tickets"
        ko-optionsText="'name'"

        ko-optionsCaption="'Choose...'"

        ko-value="chosenTicket"></select>

<button ko-enable="chosenTicket"
        ko-click="resetTicket">Clear</button>

<p ko-with="chosenTicket">
You have chosen
<b ko-text = "name"></b>
($ <span ko-text = "price"></span>)
</p>

KnockedUp will scan the body for elements that contain attributes starting with "ko-" and add these attributes as values to the applicable data-bind attribute of the applicable element, then KnockoutJs will kick in and perform its magic.

Usage

Simply add the reference to KnockedUp and just before calling the "ko.applyBindings(...)" function of KnockoutJs, just call KnockedUp's function - "ku.applyMappings()":

ku.applyMappings();

ko.applyBindings(new TicketsViewModel());

You can download the plug-in here - It's only about 800 bytes!



Disclaimer: Please note that this is currently only in beta phase as its only a concept for now.

Tweet me @FanieReynders for any questions!

Cheers