diff -r 90f6937c417e -r 37c9a17c3284 server/src/main/webapp/js/main_test_models.js
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/server/src/main/webapp/js/main_test_models.js	Tue Nov 06 13:23:19 2012 +0100
@@ -0,0 +1,305 @@
+(function() {
+	
+	var root = this;
+		
+	var Backbone = root.Backbone;
+	
+	var Rkns = root.Rkns = {};
+
+	root.ModelView = Backbone.View.extend({
+		
+		events : {
+			"click .show_form" : "show_form",
+			"click .remove_button" : "remove_click",
+		},
+		
+		initialize: function(options) {
+			_.bindAll(this);
+			this.template = _.template(options.template);
+			this.model.bind("change", this.render);
+			this.form_view = options.form_view;
+			this.form_el = options.form_el;
+			if(typeof options.getJSON === "function") {
+				this.getJSON = options.getJSON;
+			}
+		},
+		render: function() {
+			$(this.el).html(this.template(this.getJSON()));
+			return this;
+		},
+		show_form: function(evt) {
+			if(typeof this.form_view !== "undefined") {
+				this.form_view.render();
+				$(this.form_el).empty();
+				$(this.form_el).append(this.form_view.el);
+			}
+		},
+		getJSON : function() {
+			return this.model.toJSON();			
+		},
+		remove_click : function(evt) {
+			var obj_id = $(evt.currentTarget).attr("value");
+			if(typeof this.model.collection !== "undefined") {
+				this.model.collection.remove(this.model);
+			}
+		},
+
+	});
+	
+	root.ColView = Backbone.View.extend({
+		initialize: function(options) {
+			
+			_.bindAll(this);
+			this.element = options.element;
+			this.element_form = options.element_form;
+			this.element_form_el = options.element_form_el;
+			this.rendered = false;
+			
+			var that = this;
+			this.element_views = [];
+			
+			this.collection.each(function(elt) { 
+				this.add(elt); 
+			});
+			
+			this.collection.bind('add', this.add);
+			this.collection.bind('remove', this.remove);
+		},
+		
+		render : function() {
+			this.rendered = true;
+			var that = this;
+			this.$el.empty();
+			_(this.element_views).each(function(dvs){
+				that.$el.append(dvs.disp.render().el);				
+			});
+			
+			return this;
+		},
+		
+		add : function(elt) {
+			
+			var fv_args = _.extend({}, this.element_form, {model: elt});			
+			var fv = new FormView(fv_args);
+			
+			var dv_args = _.extend({}, this.element, {model: elt, tagName: 'li', form_view: fv, form_el: this.element_form_el});			
+			var dv = new ModelView(dv_args);
+			
+			this.element_views.push({disp:dv, form:fv});
+			
+			if(this.rendered) {
+				this.$el.append(dv.render().el);
+			}
+		},
+			
+		
+		remove : function(elt) {
+			var viewsToRemove = _(this.element_views).select(function(cvs) { return cvs.disp.model === elt; })[0];
+			this.element_views = _(this.element_views).without(viewsToRemove);
+			
+			if(this.rendered) {
+				viewsToRemove.disp.$el.remove();
+				viewsToRemove.form.$el.remove();
+			}
+		},
+		
+		remove_click : function(evt) {
+			var obj_id = $(evt.currentTarget).attr("value");
+			this.collection.remove(this.collection.get(obj_id));
+		}
+		
+	});
+	
+	root.FormView = Backbone.View.extend({
+		events : {
+			"change .form_field": "changed"
+		},
+		initialize: function(options) {
+			_.bindAll(this);
+			this.template = _.template(options.template);
+			this.model.bind("change", this.render);
+			if(typeof options.getJSON === "function") {
+				this.getJSON = options.getJSON;
+			}
+		},
+		render: function() {
+			this.$el.html(this.template(this.getJSON()));
+			return this;
+		},
+		changed: function(evt) {
+			var value = $(evt.currentTarget).val();
+			var field_name = $(evt.currentTarget).attr("name");
+			if(this.model.get(field_name) != value) {
+				this.model.set(field_name, value);
+			}
+		},
+		getJSON : function() {
+			return this.model.toJSON(); 
+		}
+	});
+	
+	
+	root.SelectCurrentUserView = Backbone.View.extend({
+		initialize: function(options) {
+			_.bindAll(this);
+			this.rendered = false;
+			
+			this.child_view_constructor = options.child_view_constructor;
+			this.child_tag_name = options.child_tag_name;
+			
+			this.children_views = [];
+			this.collection.each(this.add);
+			
+			this.collection.bind('add', this.add);
+			this.collection.bind('remove', this.remove);
+		},
+		add: function(elt) {
+			var child_view = new this.child_view_constructor({
+				model: elt,
+				tagName : this.child_tag_name
+			});
+			this.children_views.push(child_view);
+			
+			if (this.rendered) {
+				this.$el.append(child_view.render().el);
+			}
+		},
+		remove: function(elt) {
+			var view_to_remove = _(this.children_views).select(function(cv) { return cv.model === elt; })[0];
+			this.children_views = _(this.children_views).without(view_to_remove);
+			if (this.rendered) {
+				view_to_remove.$el.remove();
+			}
+		},
+		render: function() {
+			this.rendered = true;
+			var that = this;
+			
+			this.$el.empty().html("<option value=\"\">Unknown</option>");
+			
+			_(this.children_views).each(function(cv){
+				that.$el.append(cv.render().el);
+			});
+			
+			return this;
+		}
+		
+	});
+	
+	root.SelectUserView = Backbone.View.extend({
+		initialize: function(options) {
+			_.bindAll(this);
+			this.model.bind("change", this.render);
+		},		
+		render: function() {
+			this.$el.val(this.model.id).text(this.model.get("title"));
+			return this;
+		}
+	});
+	
+	root.CurrentUserView = Backbone.View.extend({
+		initialize : function() {
+			this._select_view = new SelectCurrentUserView({
+				el : this.el,
+				collection : this.model.get("users"),
+				child_view_constructor: SelectUserView,
+				child_tag_name: "option",
+			});
+		},
+		render: function() {
+			this.$el.empty();
+			this._select_view.render();
+			return this;
+		}
+		
+	});
+	
+	
+	root.BasicListView = Backbone.View.extend({
+		
+		initialize: function(options) {
+			_.bindAll(this);
+			
+			this.element_view_constructor = options.element_view_constructor;
+			if(typeof options.template !== "undefined") {
+				this.template = _.template(options.template);
+			}
+			
+			this.rendered = false;
+			this.element_views = [];
+			this.collection.each(this.add);
+			
+			this.collection.bind('add', this.add);
+			this.collection.bind('remove', this.remove);
+			this.collection.bind('reset', this.reset);
+			this.collection.bind('destroy', this.destroy);
+		},
+	
+		render: function() {
+			this.rendered = true;
+			var that = this;
+			this.$el.empty();
+			if(typeof this.template !== "undefined") {
+				var data = {};
+				if(typeof this.model !== "undefined") {
+					data = this.$el.model.toJSON();
+				}
+				this.$el.html(this.template(data));
+			}
+			_(this.element_views).each(function(dvs){
+				that.$el.append(dvs.render().el);
+			});
+
+			return this;
+		},
+		
+		add: function(elt) {
+			var element_view = new this.element_view_constructor({model: elt});
+			this.element_views.push(element_view);
+			if(this.rendered) {
+				this.$el.append(element_view.render().el);
+			}
+		},
+		
+		remove: function(elt) {
+			var element_view = _(this.element_views).select(function(cv) {return cv.model === elt;})[0];
+			this.element_views = _(this.element_views).without(element_view);
+			if(this.rendered) {
+				element_view.$el.remove();
+			}
+			
+		},
+
+		reset: function() {
+			_(this.element_views).each(function(cv) {
+				cv.$el.remove();
+			});
+			this.element_views = [];
+			this.collection.each(this.add);	
+		}
+	
+	});
+	
+	
+	root.BasicModelView = Backbone.View.extend({
+				
+		initialize: function(options) {
+			_.bindAll(this);
+			if(typeof options.template !== "undefined") {
+				this.template = _.template(options.template);
+			}
+			if(typeof options.getJSON === "function") {
+				this.getJSON = options.getJSON;
+			}
+			this.model.bind("change", this.render);
+		},
+		render: function() {
+			$(this.el).html(this.template(this.getJSON()));
+			return this;
+		},
+		getJSON : function() {
+			return this.model.toJSON();			
+		}
+	});
+	
+}).call(this);