gustinmi/jsmicrotmpl.js

## jsmicrotmpl.js
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>templator</title>
    <style type="text/css">
    #content {
        padding: 5px;
        border: 1px solid gray;
        min-height: 100px;
    }
    ul li {
        display: inline;
        padding-right: 10px;
    }
    </style>
</head>
<body>

<div>
    <ul>
        <li><a href="#" id="menuTime">TimeTemplate</a></li>
        <li><a href="#" id="menuEcho">EchoTemplate</a></li>
    </ul>
</div>

<div id="content">
    No template yet loaded !!
</div>

<div id="tplTime" style="display: none">
    <div>Time is: <span id="timeSpan"></span></div>
    <div>
        <button type="button" id="btnRefreshTime">Refresh clock</button>
    </div>
</div>

<div id="tplEcho" style="display: none">
    <div>You entered: <span id="echoSpan"></span></div>
    <div>
        <input type="text" id="txtEcho">
        <button type="button" id="btnRefreshEcho">Say</button>
    </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
    var views = {}; // our template's javascript code
</script>

<script type="text/javascript">
(function(){
    views.timeTemplate = {
        tplId : 'tplTime',
        onOpen : function(){
            var that = this,
                btnClick = function(evt) {
                    that.span.text('Time is now: ' + new Date());
                };

            this.span = $('#timeSpan');
            this.btn = $('#btnRefreshTime');
            this.btn.on('click', btnClick);
        },
        onClose : function(){
            // remove event handlers to prevent memory leak
            this.btn.unbind('click');
            delete this.span;
            delete this.btn;
        },
        getHtml : function(){
            return $('#' + this.tplId).html();
        }
    };
})();
</script>

<script type="text/javascript">
(function(){
    views.echoTemplate = {
        tplId : 'tplEcho',
        onOpen : function(){
            var that = this,
                btnClick = function(evt) {
                    that.span.text(that.txtEcho.val());
                };
            this.txtEcho = $('#txtEcho');
            this.span = $('#echoSpan');
            this.btn = $('#btnRefreshEcho');
            this.btn.on('click', btnClick);
        },
        onClose : function(){
            // remove event handlers to prevent memory leak
            this.btn.unbind('click');
            // delete properties
            delete this.span;
            delete this.btn;
            delete this.txtEcho;
        },
        getHtml : function(){
            return $('#' + this.tplId).html();
        }
    };
})();
</script>

<script type="text/javascript">
(function(){ // master screen
    var placeHolder = $('#content'),
        currView,
        openView = function(name, whereTo){
            var newView = views[name];
            if (currView) currView.onClose();
            whereTo.empty();
            if (newView){
                whereTo.append(newView.getHtml());
                newView.onOpen();
                currView = newView;
            }
        };

    $('#menuTime').on('click', function(){
        openView('timeTemplate', placeHolder);
    });
    $('#menuEcho').on('click', function(){
        openView('echoTemplate', placeHolder);
    });

})();

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>templator</title>
	<style type="text/css">
	#content {
	padding: 5px;
	border: 1px solid gray;
	min-height: 100px;
	}
	ul li {
	display: inline;
	padding-right: 10px;
	}
	</style>
	</head>
	<body>

	<div>
	<ul>
	<li><a href="#" id="menuTime">TimeTemplate</a></li>
	<li><a href="#" id="menuEcho">EchoTemplate</a></li>
	</ul>
	</div>

	<div id="content">
	No template yet loaded !!
	</div>

	<div id="tplTime" style="display: none">
	<div>Time is: <span id="timeSpan"></span></div>
	<div>
	<button type="button" id="btnRefreshTime">Refresh clock</button>
	</div>
	</div>

	<div id="tplEcho" style="display: none">
	<div>You entered: <span id="echoSpan"></span></div>
	<div>
	<input type="text" id="txtEcho">
	<button type="button" id="btnRefreshEcho">Say</button>
	</div>
	</div>

	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
	<script type="text/javascript">
	var views = {}; // our template's javascript code
	</script>

	<script type="text/javascript">
	(function(){
	views.timeTemplate = {
	tplId : 'tplTime',
	onOpen : function(){
	var that = this,
	btnClick = function(evt) {
	that.span.text('Time is now: ' + new Date());
	};

	this.span = $('#timeSpan');
	this.btn = $('#btnRefreshTime');
	this.btn.on('click', btnClick);
	},
	onClose : function(){
	// remove event handlers to prevent memory leak
	this.btn.unbind('click');
	delete this.span;
	delete this.btn;
	},
	getHtml : function(){
	return $('#' + this.tplId).html();
	}
	};
	})();
	</script>

	<script type="text/javascript">
	(function(){
	views.echoTemplate = {
	tplId : 'tplEcho',
	onOpen : function(){
	var that = this,
	btnClick = function(evt) {
	that.span.text(that.txtEcho.val());
	};
	this.txtEcho = $('#txtEcho');
	this.span = $('#echoSpan');
	this.btn = $('#btnRefreshEcho');
	this.btn.on('click', btnClick);
	},
	onClose : function(){
	// remove event handlers to prevent memory leak
	this.btn.unbind('click');
	// delete properties
	delete this.span;
	delete this.btn;
	delete this.txtEcho;
	},
	getHtml : function(){
	return $('#' + this.tplId).html();
	}
	};
	})();
	</script>

	<script type="text/javascript">
	(function(){ // master screen
	var placeHolder = $('#content'),
	currView,
	openView = function(name, whereTo){
	var newView = views[name];
	if (currView) currView.onClose();
	whereTo.empty();
	if (newView){
	whereTo.append(newView.getHtml());
	newView.onOpen();
	currView = newView;
	}
	};

	$('#menuTime').on('click', function(){
	openView('timeTemplate', placeHolder);
	});
	$('#menuEcho').on('click', function(){
	openView('echoTemplate', placeHolder);
	});

	})();

	</script>

	</body>
	</html>