JavaScript: implementare un binding di base con gli elementi HTML usando gli attributi di dati

Possiamo implementare un binding tra elementi HTML e JavaScript usando gli attributi di dati.

La soluzione consiste nell'usare il valore dell'attributo di dati come riferimento ad un metodo di un oggetto. Quindi data la seguente marcatura:

<p>
    <button id="test-button" data-action="test">Test</button>
</p>

avremo:

(function( namespace ) {
	
	function test() {
		alert( "ok" );
	}
	
	namespace.test = test;
	
	function doAction( element, evtType ) {
		var action = element.dataset.action;
		element.addEventListener( evtType, function() {
			namespace[action]();	
			
		}, false);
	}
	
	document.addEventListener( "DOMContentLoaded", function() {
		doAction( document.querySelector( "#test-button" ), "click" );	
		
	});
	
})( window );