Demonstration of a simple Model and View

Using grvMVC.js and support libs

[ onclick="gXYZ.setValue(0)" ]
[ onclick="gXYZ.setValue(1)" ]
[ onclick="gXYZ.setValue('foo')" ]

Output from onLoadPage() put initial model value here

Area inside <span id="xyzView"></span> put xyz view here

Area inside <span id="clrBtn"></span> put clear button here

The source code... 

// MODEL: simple scalar model 
var gXYZ = new MVCScalarModel("XYZ"); 

// VIEW: view of XYZ scalar model 
gMVCRootView.addSubView( "xyzView", new MVCScalarView( gXYZ ) ); 

// CONTROLLER: button to invoke "clear XYZ scalar model" event
gMVCRootView.addSubView( "clrBtn", new MVCFormButtonController( "Clear XYZ", "click me", "onClearBtnPressed" ) );

// EVENT HANDLER:
function onClearBtnPressed(){ gXYZ.setValue("cleared"); }

function onLoadPage() 
{ 
  gMVCRootView.enable(); 
  gXYZ.setValue("I am the initial value of XYZ"); 
  var s = "gXYZ:("+gXYZ.name+")[" + gXYZ.getValue() + "]{br/}"; 
  document.getElementById("OutputArea").innerHTML = s; 
}