html JavaScript模板示例以HTML或XML格式显示JS数据的呈现技术。
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html JavaScript模板示例以HTML或XML格式显示JS数据的呈现技术。相关的知识，希望对你有一定的参考价值。
<!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:"homersimpson@fakeemail.com", phone:"555-123-1234"},
{id:2, firstName:"Bart", lastName:"Simpson", email:"bartsimpson@fakeemail.com", phone:"555-123-2345"},
{id:3, firstName:"Marge", lastName:"Simpson", email:"margesimpson@fakeemail.com", phone:"555-123-3456"},
{id:4, firstName:"Lisa", lastName:"Simpson", email:"lisasimpson@fakeemail.com", phone:"555-123-4567"},
{id:5, firstName:"Maggie", lastName:"Simpson", email:"maggiesimpson@fakeemail.com", 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>以上是关于html JavaScript模板示例以HTML或XML格式显示JS数据的呈现技术。的主要内容，如果未能解决你的问题，请参考以下文章
GTM 在模板中发现无效的 HTML、CSS 或 JavaScript
django 无法读取 csv 文件以在 javascript 和 html 模板中绘制 highchart
javascript 在html模板或主题中显示当前时间。我从https://github.com/MariaAlicia收集了这个要点