Created
November 23, 2014 18:59
-
-
Save gustinmi/186337e9b4de0e9ba42f to your computer and use it in GitHub Desktop.
JavaScript Templating Framework Easy 1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment