Classic Javascript/Actionscript event handlers in MVC

Event handlers are the “Controller” part of MVC in a page.

In most situations, the controller needs to be instantiated when data are ready (for example, when an xml stream is parsed). When triggered, controller often leads to events that display data. It is often convenient to directly attach data to the visual objects that the event handlers are attached to, so that when triggered, the event handler function can grab the data by simply referring to “this.data” since the “this” is scoped to the visual object at the moment the event handler is attached to it. Handy data are good, but this confuses model with presentation and also results in redundant data. One trick I played recently was to build an index attribute in the visual object that serves as sort of a lookup table for relevant data. The data are stored in a seperate object (centralized as model) and can be accessed by different controllers.

The followings are the snippets of code in action:

//When data are available, loop through the data and do all the mover’s job while we initialize/define the event handler

for (var i=0; i<data_arr.length; i++){

//…do some moving job

var divNode = document.createElement(“div”);
divNode.index = i;
divNode.onclick = onTitleClick;

……

}

function onTitleClick(){

var index = this.index;
var tab_index = ARCHIVED_ID;
var dataTab = navData[tab_index];
var data = dataTab.localData;
var gmarker = data[index][“gmarker”];
var infoTabs = data[index][“infoTabs”];
gmarker.openInfoWindowTabsHtml(infoTabs);
}

The above snippet of code is the more “conventional” way of assigning an event handler. In a more OO way, it can be something like this (due to different implementations of event handling in javascript, there is now no consistent way across browsers):

function createMarker(id, gmarker, infoTabs, divNode){
GEvent.addListener(gmarker, “click”, function() {
gmarker.openInfoWindowTabsHtml(infoTabs);
hilightTitle(divNode);
});

//…other things
return gmarker;
}

The event handler is wrapped up in a function call that passes on all the data chunks as parameters to the former. This somehow serves as a machanism to (misteriously) keep track of which controller is associated with which piece of data (like the gmarker<->infoTabs pair) without assigning the data as dynamic attributes to the controller objects.

So to sum it up, the steps are:

1. Query and parse data;

2. Define and attach the event handlers when parsing the data.

3. Build lookup attribute as attribute of the visual object that the event handler is attached to; or simply attach relevant snippet data directly to the visual objects when data don’t need to be shared across multiple controllers; or in a more OO way, pass the data as parameters directly when defining/assigning the event handlers.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s


%d bloggers like this: