Zoom Zoom...

Here is an awesome little JQuery hack if you ever come across the problem of displaying multiple images on a single page without having to make them all thumbnail sized and ruining the entire visual experience of the page.

Sexy html! Thank you JQuery! Gray hairs be gone!

Anyone who has worked with JQuery cannot deny the absolute simplicity it brings to the table in terms of animation. (This is definitely not the only thing JQuery is great at but what I am focusing on today)

Modular JavaScript with RequireJs

"RequireJS is a JavaScript file and module loader"

While looking at some of the familiar namespacing patterns for JavaScript, I stumbled upon RequireJs.
Namespacing is essential in JavaScript to provide scope to your code in order to prevent conflicts with other variables, objects or functions with the same name that could have been loaded into the global namespace or scope.
There are no official namespaces in JavaScript but this can be achieved using objects and closures.

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