Alex @ Net

  +    â€“  

Code:

dojo.lang.declare('ListModel', null, {

	initializer : function (items) {
		this._items = items;
		this._selected = -1;
	},

	getItems : function () {
		return [].concat(this._items);
	},

	addItem : function (item) {
		this._items.push(item);
	},

	removeItemAt : function (index) {
		this._items.splice(index, 1);
	},

	removeSelectedItem : function () {
		if (-1 != this._selected) {
			this._items.splice(this._selected, 1);
		}
	},

	setSelected : function (index) {
		this._selected = index;
	}

});

dojo.lang.declare('ListView', null, {

	initializer : function (model, controller, elements) {
		this._model = model;
		this._controller = controller;
		this._elements = elements;
		with (dojo.event) {
			connect(this._model, 'addItem', this, 'rebuildList');
			connect(this._model, 'removeSelectedItem', this, 'rebuildList');
			connect(this._elements.list, 'onchange', 
				this._controller, 'updateSelected');
		}
	},

	show : function () {
		this.rebuildList();
		var e = this._elements;
		dojo.event.connect(e.addButton, 'onclick', this._controller, 'addItem');
		dojo.event.connect(e.delButton, 'onclick', this._controller, 'delItem');
	},

	rebuildList : function () {
		var list = this._elements.list;
		while (list.lastChild) {
			list.removeChild(list.lastChild);
		}
		var items = this._model.getItems();
		for (var key in items) {
			list.appendChild(document.createElement('option')
				).appendChild(document.createTextNode(items[key]));
		}
		this._model.setSelected(-1);
	}

});

dojo.lang.declare('ListController', null, {

	initializer : function (model) {
		this._model = model;
	},

	addItem : function (e) {
		var item = prompt('Add item:', '');
		if (item) {
			this._model.addItem(item);
		}
		e.preventDefault();
	},

	delItem : function (e) {
		this._model.removeSelectedItem();
		e.preventDefault();
	},

	updateSelected : function (e) {
		this._model.setSelected(e.target.selectedIndex);
	}

});

dojo.addOnLoad(function () {
	var model = new ListModel(['PHP', 'JavaScript']);
	var view = new ListView(model, new ListController(model),
		{
			'list' : dojo.byId('list'), 
			'addButton' : dojo.byId('plusBtn'), 
			'delButton' : dojo.byId('minusBtn')
		}
	);
	view.show();
});