Archive for June, 2011

Simple Javascript MVC (2)

The previous version of the code just showed some “proof of concept” about using pub/sub to implement MVC in javascript. The AmplifyJS framework was used for its Pub/Sub implementation.
To make what is going on a little bit clearer I isolated the pub/sub code into an Observer object. I also formalised the MVC triad into the Model, View and Controller objects.
View decorates the Observer object with some view specific functionanlity, while Controller and Model are still mere Observers.
Next step: maybe try and use the Command pattern.

Observer:

/* requires AmplifyJS */

Observer = function (aEventsToPublish, aEventsToSubscribeTo){
var pubsub = amplify;
var events = [];

obj = function(){ };
obj.prototype.addEvent = function(sEvent){events[sEvent]=true};
obj.prototype.removeEvent = function(sEvent){if(events[sEvent]) delete events[sEvent]};
obj.prototype.publish = function(sEvent,oData){

if(events[sEvent]){

pubsub.publish(sEvent, oData);
}
};

obj.prototype.init = function(aEventsToPublish, aEventsToSubscribeTo){
if(aEventsToPublish)
{
for(var i=0; i<aEventsToPublish.length;i++)
{
this.addEvent(aEventsToPublish[i]);
}
}
if(aEventsToSubscribeTo)
{
for(i=0; i<aEventsToSubscribeTo.length;i++)
{
pubsub.subscribe(aEventsToSubscribeTo[i].event, aEventsToSubscribeTo[i].handler);

}

}
}
obj.prototype.init(aEventsToPublish, aEventsToSubscribeTo);
return obj;

};

View:

/* requires AmplifyJS */

View = function (aTriggers, aEventsToPublish, aEventsToSubscribeTo){

var view = new Observer( aEventsToPublish, aEventsToSubscribeTo);

view.init = function (aTriggers,aEventsToPublish, aEventsToSubscribeTo ){
view.prototype.init(aEventsToPublish, aEventsToSubscribeTo);

//peform view specific initialisation.
var i=0;
if(aTriggers)
{
for(i=0; i<aTriggers.length;i++)
{
eval('this[aTriggers['+i+']['+0+']]' +'=function(){view.prototype.publish("'+aTriggers[i][1]+'")}');
}
}
}
view.init(aTriggers,aEventsToPublish, aEventsToSubscribeTo);
return view;
};

Find the remainder of the code here

Simple Javascript MVC

OK, so I take forever to finish the MVC framework I talked about here I have been lazy… But I still come back to something I mentioned in the previous post:
The approach I take tends to warrant the use of the Publish/Subscribe pattern.
So what I did is use the Publish?subscribe pattern everywhere I could, that is any time messages needed to be passed between entities. Here our entities are the MVC triad. Contraints as to which can communicate with with which can easily be implemented in the code.
To not reinvent the wheel, I use AmplifyJS for the Publish?Subscribe functionality.

Around this pattern, the Controller, the View and the Model are built.
Here you have an example model:


numnber_of_clicks_model = (function (){
var pubsub = amplify;
var _number = 0;
NUMBER_INCREMENTED = 'NUMBER_INCREMENTED';
obj = {
'incrementCounterHandler': function (){++_number; pubsub.publish(NUMBER_INCREMENTED, {'number': _number}) },
'decrementCounterHandler': function (){_number = (_number>0) ? --_number: 0; pubsub.publish(NUMBER_INCREMENTED, {'number': _number}) }
pubsub.subscribe('INCREMENT_COUNTER',obj.incrementCounterHandler);
pubsub.subscribe('DECREMENT_COUNTER',obj.decrementCounterHandler);
return obj; }());

Download it here: https://subversion.assembla.com/svn/pusubmvc/

The files may look big in size, but really, only jquery.js and amplify.js are needed.

Follow

Get every new post delivered to your Inbox.