functionEvent (sender) { This. _sender =Sender; This. _listeners = [];} Event.prototype={attach:function(listener) { This. _listeners.push (listener); }, notify:function(args) {varindex; for(index = 0; Index < This. _listeners.length; Index + = 1) { This. _listeners[index] ( This. _sender, args); } }};/** * the Model. Model stores items and notifies * observers about changes. */functionListmodel (items) { This. _items =items; This. _selectedindex = 1; This. itemAdded =NewEvent ( This); This. itemremoved =NewEvent ( This); This. SelectedIndexChanged =NewEvent ( This);} Listmodel.prototype={getItems:function () { return[].concat ( This. _items); }, AddItem:function(item) { This. _items.push (item); This. Itemadded.notify ({item:item}); }, Removeitemat:function(index) {varitem; Item= This. _items[index]; This. _items.splice (Index, 1); This. Itemremoved.notify ({item:item}); if(Index = = = This. _selectedindex) { This. setSelectedIndex (-1); }}, Getselectedindex:function () { return This. _selectedindex; }, setSelectedIndex:function(index) {varPreviousindex; Previousindex= This. _selectedindex; This. _selectedindex =index; This. Selectedindexchanged.notify ({previous:previousindex}); }};/** * the View. View presents the model and provides * the UI events. The controller is attached-these * events to handle the user interraction. */functionListView (model, elements) { This. _model =model; This. _elements =elements; This. listmodified =NewEvent ( This); This. addbuttonclicked =NewEvent ( This); This. delbuttonclicked =NewEvent ( This); var_this = This; //Attach model Listeners This. _model.itemadded.attach (function() {_this.rebuildlist (); }); This. _model.itemremoved.attach (function() {_this.rebuildlist (); }); //attach listeners to HTML controls This. _elements.list.change (function(e) {_this.listmodified.notify ({index:e.target.selectedindex}); }); This. _elements.addbutton.click (function() {_this.addbuttonclicked.notify (); }); This. _elements.delbutton.click (function() {_this.delbuttonclicked.notify (); });} Listview.prototype={show:function () { This. Rebuildlist (); }, Rebuildlist:function () { varlist, items, key; List= This. _elements.list; List.html (‘‘); Items= This. _model.getitems (); for(Keyinchitems) { if(Items.hasownproperty (key)) {List.append ($ (' <option> ' + items[key] + ' </option> ')); } } This. _model.setselectedindex (-1); }};/** * the Controller. Controller responds to user actions and * invokes changes on the model. */functionListcontroller (model, view) { This. _model =model; This. _view =view; var_this = This; This. _view.listmodified.attach (function(sender, args) {_this.updateselected (args.index); }); This. _view.addbuttonclicked.attach (function() {_this.additem (); }); This. _view.delbuttonclicked.attach (function() {_this.delitem (); });} Listcontroller.prototype={addItem:function () { varitem = window.prompt (' ADD item: ', '); if(item) { This. _model.additem (item); }}, Delitem:function () { varindex; Index= This. _model.getselectedindex (); if(Index!==-1) { This. _model.removeitemat ( This. _model.getselectedindex ()); }}, updateselected:function(index) { This. _model.setselectedindex (index); }}; varModel =NewListmodel ([' PHP ', ' JavaScript ']), view=NewListView (model, {' List ': $ (' #list ')), ' AddButton ': $ (' #plusBtn '), ' Delbutton ': $ (' #minusBtn ')}), Controller=NewListcontroller (model, view); View.show ();