Model View Controller, Javascript

How to write Model View Controller (MVC Code) for the form:

Problem:

Write Model View Controller (MVC) code without any framework:

Solution using just javascript.

Templates

Index.htm

<!DOCTYPE html />
<html>
<head></head>
<body>
<input id="txtnVal" type="number" />
<button id="btnCalc">Calculate</button>

<script src="../ins/ins.js"></script>
<script src="../Persons/Person.js"></script>
<script src="../Persons/Persons.js"></script>
<script src="IndexM.js"></script>
<script src="IndexV.js"></script>
<script src="IndexC.js"></script>
</body>
</html>

IndexM.js

"use strict";
function Model(oInit) {
    this.nVal=0;
    this.oVal=new SomeClass();
    if (typeof oInit === "object") {this.Init(oInit);}
}
Model.prototype.Calc = function () {
};
Model.prototype.Init = function (oInit) {
    if (oInit.nVal) this.nVal = oInit.nVal;
    if (oInit.oVal) this.oVal.Init(oInit.oVal)
};
Model.prototype.SerializeAll=function(){
    return oS.FR+
    oS.Ser.Int(this.nVal)+oS.DELIM+
    this.oVal.SerializeAll()+
    oS.TO;
};
Model.prototype.DeserializeAll=function(sSer){
    var Vals = oS.Split(sSer);
    var nFld = 0;
    this.nVal = oS.Des.Int(Vals[nFld++]);
    this.oVal.DeserializeAll(Vals[nFld++]);
    return this;
};
Model.prototype.IsEqual=function(oModelOrg){
    return (
    this.nVal===oModelOrg.nVal &&
    this.oVal.IsEqual(oModelOrg.oVal)
    );
};

IndexV.js:

"use strict";
function View(){
}
View.prototype.Show = function(){
    $("txtnVal").value = oM.nVal.toString();
};
View.prototype.Load = function(){
    oM.nVal = parseInt($("txtnVal").value, 10);
};
View.prototype.Events = function(){
    $("btnCalc").onclick = oC.Recalc;
};
View.prototype.Init = function(){
};
window.onload = function(){
    oM = new Model();
    oC = new Controller();
    oV = new View();
    oC.Init();
};

IndexC.js:

"use strict";
var oM, oV, oC, oX;
function Controller() {
}
Controller.prototype.Init=function(){
    oV.Init();
    oV.Events();

    //oC.Recalc();
    oM.Calc();
    oV.Show();
    oX = new ins.CORS("http://www.example.com/aj.ashx", this.XResult);
};
Controller.prototype.XResult = function(oResult){
    alert(oResult);
};

Code reuse

prettify

baseline

Model View Controller, Javascript

Problem:

Solution using just javascript.

Templates

1 comment: