Created
August 20, 2012 19:44
-
-
Save triceam/3407134 to your computer and use it in GitHub Desktop.
JavaScript Templating Example to show rendering techniques of JS data in HTML or XML formats.
This file contains hidden or 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 PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" | |
| "http://www.w3.org/TR/html4/loose.dtd"> | |
| <html> | |
| <head> | |
| <title>JSON Transform</title> | |
| <script type="text/javascript" src="http://code.jquery.com/jquery-1.8.0.min.js"></script> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script> | |
| <script type="text/javascript" src="https://raw.github.com/douglascrockford/JSON-js/master/json2.js"></script> | |
| <link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet"></link> | |
| <script type="text/template" id="tpl-html"> | |
| <div class="well"> | |
| <table class="table"> | |
| <thead> | |
| <tr> | |
| <th>ID</th> | |
| <th>Name</th> | |
| <th>Email</th> | |
| <th>Phone</th> | |
| </tr> | |
| </thead> | |
| <tbody> | |
| <% _.each( target, function(i) {%> | |
| <tr> | |
| <td><%= i.id %></td> | |
| <td><%= i.lastName %>, <%= i.firstName %></td> | |
| <td><%= i.email %></td> | |
| <td><%= i.phone %></td> | |
| </tr> | |
| <% }); %> | |
| </tbody> | |
| </table> | |
| </div> | |
| </script> | |
| <script type="text/template" id="tpl-xml"> | |
| <data> | |
| <% _.each( target, function(i) {%> | |
| <entry> | |
| <id><%= i.id %></id> | |
| <name> | |
| <last><%= i.lastName %></last> | |
| <first><%= i.firstName %></first> | |
| </name> | |
| <contact> | |
| <email><%= i.email %></email> | |
| <phone><%= i.phone %></phone> | |
| </contact> | |
| </entry> | |
| <% }); %> | |
| </data> | |
| </script> | |
| <script> | |
| var rawData = [ | |
| {id:1, firstName:"Homer", lastName:"Simpson", email:"[email protected]", phone:"555-123-1234"}, | |
| {id:2, firstName:"Bart", lastName:"Simpson", email:"[email protected]", phone:"555-123-2345"}, | |
| {id:3, firstName:"Marge", lastName:"Simpson", email:"[email protected]", phone:"555-123-3456"}, | |
| {id:4, firstName:"Lisa", lastName:"Simpson", email:"[email protected]", phone:"555-123-4567"}, | |
| {id:5, firstName:"Maggie", lastName:"Simpson", email:"[email protected]", phone:"555-123-5678"} ]; | |
| function showJSONString() { | |
| $("#output").html( "<pre>" + JSON.stringify(rawData) + "</pre>") ; | |
| $("a").removeClass("btn-warning"); | |
| $("#json").addClass("btn-warning"); | |
| } | |
| function generateHTML() { | |
| var data = { target:rawData }; | |
| var template = _.template( $("#tpl-html").text() ); | |
| $("#output").html( template(data) ); | |
| $("a").removeClass("btn-warning"); | |
| $("#html").addClass("btn-warning"); | |
| } | |
| function generateXML() { | |
| var data = { target:rawData }; | |
| var template = _.template( $("#tpl-xml").text() ); | |
| var xml = template(data); | |
| $("#output").html( "<pre>" + _.escape( xml ) + "</pre>" ); | |
| $("a").removeClass("btn-warning"); | |
| $("#xml").addClass("btn-warning"); | |
| } | |
| </script> | |
| </head> | |
| <body style="padding:50px 10px "> | |
| <div class="navbar navbar-fixed-top"> | |
| <div class="navbar-inner"> | |
| <div class="container"> | |
| <a href="javascript:showJSONString()" class="btn" id="json">Show JSON String</a> | |
| <a href="javascript:generateHTML()" class="btn" id="html">Generate HTML</a> | |
| <a href="javascript:generateXML()" class="btn" id="xml">Generate XML</a> | |
| </div> | |
| </div> | |
| </div> | |
| <div id="output">Click a button above to transform the raw JS data.</div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment