Demonstration of Model-View-Controller Concept
(using multiple-inheritance version of micro MVC)

Using grvMicroMVCm.js and grvObjects.js

[ 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 ScalarModel();

// VIEW: view of XYZ scalar model
View.Add( "xyzView", new ScalarView( gXYZ ) );

// CONTROLLER: button to invoke "clear XYZ scalar model" event
View.Add( "clrBtn", new ButtonController( "Clear XYZ", "onClearBtnPressed" ) );

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

function onLoadPage(){
  gXYZ.setValue("I am the initial value of XYZ");
  document.getElementById("OutputArea").innerHTML = gXYZ.getValue();
}