A short tour of learning JavaScript MVC

"Writing is not code, is your thinking", often feel that the code you write "coarse meat rough", see those who are either exquisite small, or elegant, or aboveboard code, often dejected and mouth-watering.

Why (Why can't my code do this?) ）

When? (When my code can have this quality)

What? (What am I going to do?) ）

At this point my answer is: Calm down, think more, practice more. (Lao Li, .....) A good soul to do)

Today I want to rethink the practice of MVC.

The opening ...

Model

Encapsulates data related to the business logic of an application and how data is processed. The model does not depend on "view" and "Controller"//When the model changes, the listener that notifies it

function Listmodel (items) {

This._items = items;

This._selectedindex =-1;

this.itemadded = new Event (this);

this.itemremoved = new Event (this);

this.selectedindexchanged = new Event (this);

}

Listmodel.prototype = {

Getitems:function () {

return [].concat (This._items);

},

Additem:function (item) {

This._items.push (item);

This.itemAdded.notify ({item:item});

},

Removeitemat:function (index) {

VAR item;

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) {
var Previousindex;
Previousindex = This._selectedindex;
This._selectedindex = index;
This.selectedIndexChanged.notify ({previous:previousindex});
}

};

function Event (sender) {
This._sender = sender;
This._listeners = [];
}
Event.prototype = {
Attach:function (listener) {
This._listeners.push (listener);
},
Notify:function (args) {
var index;
for (Index=0;index<this._listeners.length;index +=1) {
This._listeners[index] (this._sender, args);
}
}
};

View
The view displays model data and triggers the model data. The controller is used to handle these user interaction events
function ListView (model, elements) {
This._model= model;
This._elements = elements;

this.listmodified = new Event (this);
this.addbuttonclicked = new Event (this);
this.delbuttonclicked = new Event (this);

var _this = this;
Binding model Listeners
This._model.itemadded.attach (function () {
_this.rebuildlist ();
});
This._model.itemremoved.attach (function () {
_this.rebuildlist ();
});

To bind the listener to an HTML control
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 () {
var list, items, key;
list = This._elements.list;
List.html ("");

Items = This._model.getitems ();
For (key in items) {
if (Items.hasownproperty (key)) {
List.append ($ ("<option>" +items[key]+ "</option>"));
}
}
This._model.setselectedindex (-1);
}
};

Controller
The controller responds to user actions and invokes the change function on the model
function Listcontroller (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 () {
var item = window.prompt (' ADD item: ', ');
if (item) {
This._model.additem (item);
}
},
Delitem:function () {
var index;
index = This._model.getselectedindex ();
if (index!==-1) {
This._model.removeitemat (This._model.getselectedindex ());
}
},
Updateselected:function (index) {
This._model.setselectedindex (index);
}
};

//}());

Test Cases
$ (function () {
var model = new Listmodel ([' PHP ', ' JavaScript ']),

view = new ListView (model, {
' List ': $ (' #list '),
' AddButton ': $ (' #plusBtn '),
' Delbutton ': $ (' #minusBtn ')
}),

Controller = new Listcontroller (model, view);
View.show ();
});

A short tour of learning JavaScript MVC