Making your job easier with JOB

JOB, in this instance, being Javascript Object Binding. What does it do? In a nutshell, it automatically binds Javascript objects to DOM elements. What's it for? Making code simpler and easier to maintain.

The problem with DOM manipulation

Most interesting things you can do with javascript rely on DOM manipulation. But it's a painful business - hunting down elements with getElementByID, creating nodes, appending children, and so on. Even with popular JS libraries it's no easier; the syntax is different, but you can still end up with reams of code to create and append new DOM nodes.

It's also messy. It breaks any clean separation of UI (HTML) and behaviour (JS). Writing HTML in JS is a pain to do, difficult to test and even worse to modify. So why not keep the HTML where it belongs - in the HTML - and use the Javascript for the behaviour. This is what JOB is for.

How do you use it?

Simple. If you are creating a HTML 'control' which has javascript behaviours, you identify the HTML elements with an ID that matches the name of the Javascript object. Any "member" elements of the HTML are similarly identified, and references to these become members of the Javascript object. This can be done with single instance objects ("controls") and multiple instance objects which are created on the fly (instances of "classes").

The documentation isn't ready yet, but there is a simple demo in the SVN repository - showing what JOB can do for you.

http://javascript-object-binding.googlecode.com/svn/trunk/JOB/demos/simple%20example/demo.html