Let's start with something common to almost every Model-View interaction: observing objects.
First of all let's make some clarification about naming:
Listener and Observer are two slightly different implementation of the same pattern: The Observer pattern .
In this article i write about the first one, the Listener, but objects are called Observable and Observer because attaining to the "listen" semantic would bring ugly names , such as Audible... which is not fancy.
Fancy names are important, thats why java has POJO
Applications work around objects that represent data, your business data; in the MVC world they are called models. Most of the times you want to represent such data into the interface, for example when you create a model named User and load its properties from the server/database in order to display a profile page. But what if that data can change and you want to reflect those changes into the interface?
The object responsible for the rendering of the object has to catch those changes, so the model has to be Observable.
Let's look at some code: (You can run it here http://jsfiddle.net/fatmatto/wF5Th/)
var Observable = function() {
this.eventHandlers = [];
this.emit = function(eventName,eventObject) {
if (this.eventHandlers.hasOwnProperty(eventName)) {
this.eventHandlers[eventName].call(this,eventObject);
}
}
this.on = function(eventName,callback) {
if ('function' !== typeof callback)
throw new Error('callback must be a function');
this.eventHandlers[eventName] = callback;
}
this.set = function(prop,value) {
var oldval = this[prop];
this[prop] = value;
if(oldval !== this[prop])
this.emit('change '+prop,{oldValue : oldval,
newValue : value});
}
}
var Observer = function() {
this.observe = function(eventType,observableObject,callback) {
observableObject.on(eventType,callback);
}
}
var hero = new Observable();
hero.name = 'Deadpool';
hero.power = 'Katanas';
var o = new Observer();
o.observe('change name',hero,function(eventOptions){
console.log('The name of the hero changed to '+eventOptions.newValue);
});
o.observe('change power',hero,function(eventOptions){
console.log('The power of the hero changed to '+eventOptions.newValue);
});
hero.set('name','Wade Wilson');
hero.set('power','Regeneration');
As you can see the Observer will be notified by the observable simply declaring a proper observer callback.The Observable object has a method emit() that notifies the observer and a method on() that allows you to define a callback to some kind of event.
