Category: Demo

A few days ago I was working on a project for a client that basically involved allowing a non-technical end user to build arbitrarily complex boolean queries using a UI. The user could basically click, configure, and drag/drop queries to build expressions like (A AND B OR C) AND (Z OR X). They would also need the ability to edit the pieces in-line, toggle ANDs to ORs, and so on.

Anyway, not to difficult to represent with a data structure but the complexity was going to be in tying the UI to the data structure with callbacks and events. Usually, I would of used a single $(“a”).click() handler to handle all the edit, delete, and configuration clicks in the UI but that quickly devolves into a disastrous mess of if statements and hasClass() checks.

Hoping to avoid this, I started thinking about cleaner ways to implement this and realized if I actually bound events to the individual objects they were going to effect the resulting code would be much cleaner. The UI elements were going to be dynamically generated each time the data structure was updated anyway so binding $.click() events on the <a> tags to their corresponding objects wouldn’t be to much extra work.

All in all, things worked out pretty well. The final code is much easier to follow and there isn’t a gigantic if() block which is impossible to trace.

I can’t share the actual implementation I used but I threw together an example which outlines the technique. Check out the JSFiddle at http://jsfiddle.net/fN46q/4/

Looking at the code, the Board object is an Array that in turn contains Piece objects to form a 3×3 grid.

The Piece objects individually supply a render function to display themselves and then contain a click() function which handles their $.click() events.

The key line which makes this work is:

   $(td).find("a").bind("click", {piece: this[i][j]}, this[i][j].click);

What the second parameter does is add the object into the Event object that is passed to the event handler. More info is available on the $.bind() documentation but looking at the click() function in the Piece object you can see where it comes in to play:

 click: function( e ){
    e.data.piece.val = !e.data.piece.val;
    e.data.piece.board.render();
    return false;
 }

So effectively, the data structure is now linked to the DOM.

As always, thoughts, comments and are feedback welcome!