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
