generalizing the View

Source/Controller.js

@@ -1,3 +1,3 @@
 var Controller = new Class({
 
-});
+});

Source/View.js

@@ -1,9 +1,53 @@
+Array.implement({ // TODO: remove for MooTools 1.3
+	invoke: function(fn, args, bind){
+		for (var i = 0; i < this.length; i++) this[i][fn].apply(bind, args);
+		return this;
+	}
+});
+
 var View = new Class({
 
 	Implements: Events,
 
+	initialize: function(){
+		this.getters = {};
+		this.setters = {};
+	},
+
 	toElement: function(){
 		return this.element;
+	},
+
+	addOutlet: function(name, setter, getter){
+		this.addSetter(name, setter);
+		this.setGetter(name, getter);
+		return this;
+	},
+
+	addSetter: function(name, fn){
+		if (!this.setters[name]) this.setters[name] = [];
+		this.setters[name].push(fn);
+		return this;
+	},
+
+	setGetter: function(name, fn, noOverride){
+		if (!this.getters[name] || !noOverride) this.getters[name] = fn;
+		return this;
+	},
+
+	set: function(key, value){
+		if (typeof key == 'object'){
+			for (prop in key) this.set(prop, key[prop]);
+			return this;
+		}
+		this.setters[key].each(function(setter){
+			setter(value);
+		}, this);
+		return this;
+	},
+
+	get: function(key){
+		return this.getters[key]();
 	}
 
 });
@@ -14,6 +58,8 @@ View.create = function(specification){
 		Extends: View,
 
 		initialize: function(data){
+			this.parent();
+
 			var element = new Element('div', {html: specification.html}).getFirst();
 			this.element = element;
 
@@ -25,8 +71,15 @@ View.create = function(specification){
 				};
 			};
 
-			if (specification.outlets) this.outlets = Hash.map(specification.outlets, function(mappings){
-				return $splat(mappings).map(parseMapping);
+			if (specification.outlets) Hash.each(specification.outlets, function(mappings, name){
+				$splat(mappings).map(function(mapping){
+					mapping = parseMapping(mapping);
+					this.addSetter(name, function(value){
+						mapping.element.set(mapping.attribute, value);
+					}).setGetter(name, function(){
+						return mapping.element.get(mapping.attribute);
+					}, true);
+				}, this);
 			}, this);
 
 			if (specification.actions) Hash.each(specification.actions, function(mappings, action){
@@ -39,22 +92,6 @@ View.create = function(specification){
 			}, this);
 
 			if (data) this.set(data);
-		},
-
-		set: function(key, value){
-			if (typeof key == 'object'){
-				for (prop in key) this.set(prop, key[prop]);
-				return this;
-			}
-			this.outlets[key].each(function(outlet){
-				outlet.element.set(outlet.attribute, value);
-			}, this);
-			return this;
-		},
-
-		get: function(key){
-			var outlet = this.outlets[key][0];
-			return outlet.element.get(outlet.attribute);
 		}
 
 	});