<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="template.js"></script>
<script language="javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js测试</title>
</head>
<body>
<textarea name="template_jst" id="template_jst" cols="44" rows="22">
Hello ${customer.first} ${customer.last}.<br/>
Your shopping cart has ${products.length} item(s):
<table>
<tr><td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Quantity & Alert</td>
</tr>
{for p in products}
<tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
<td>$${p.price}</td><td>${p.quantity} :
${p.alert|default:""|capitalize}</td>
</tr>
{forelse}
<tr><td colspan="4">No products in your cart.</tr>
{/for}
</table>
{if customer.level == "gold"}
We love you! Please check out our Gold Customer specials!
{else}
Become a Gold Customer by buying more stuff here.
{/if}
</textarea>
<div>
<textarea name="jsData" id="jsData" cols="44" rows="21">
var data = {
products : [ { name: "Linu", desc: "computer",
price: 1000, quantity: 100, alert:null },
{ name: "ipod", desc: "music player",
price: 200, quantity: 200, alert:"on sale now!" },
{ name: "cinema display", desc: "screen",
price: 800, quantity: 300, alert:"best deal!" } ],
customer : { first: "John", last: "Public", level: "gold" }
};
</textarea>
</div>
<hr/>
Output:
<div id="output" name="dfjdk">test</div>
</body>
<script language="javascript">
var dataTextarea = document.getElementById("jsData");
var outputEl = document.getElementById("output");
eval(dataTextarea.value);
//outputEl.innerHTML = TrimPath.processDOMTemplate("template_jst", data);
outputEl.innerHTML =TrimPath.parseTemplate(document.getElementById("template_jst").value, "template_jst").process(data);
</script>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="javascript" src="template.js"></script>
<script language="javascript">
</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js测试</title>
</head>
<body>
<textarea name="template_jst" id="template_jst" cols="44" rows="22">
Hello ${customer.first} ${customer.last}.<br/>
Your shopping cart has ${products.length} item(s):
<table>
<tr><td>Name</td>
<td>Description</td>
<td>Price</td>
<td>Quantity & Alert</td>
</tr>
{for p in products}
<tr><td>${p.name|capitalize}</td><td>${p.desc}</td>
<td>$${p.price}</td><td>${p.quantity} :
${p.alert|default:""|capitalize}</td>
</tr>
{forelse}
<tr><td colspan="4">No products in your cart.</tr>
{/for}
</table>
{if customer.level == "gold"}
We love you! Please check out our Gold Customer specials!
{else}
Become a Gold Customer by buying more stuff here.
{/if}
</textarea>
<div>
<textarea name="jsData" id="jsData" cols="44" rows="21">
var data = {
products : [ { name: "Linu", desc: "computer",
price: 1000, quantity: 100, alert:null },
{ name: "ipod", desc: "music player",
price: 200, quantity: 200, alert:"on sale now!" },
{ name: "cinema display", desc: "screen",
price: 800, quantity: 300, alert:"best deal!" } ],
customer : { first: "John", last: "Public", level: "gold" }
};
</textarea>
</div>
<hr/>
Output:
<div id="output" name="dfjdk">test</div>
</body>
<script language="javascript">
var dataTextarea = document.getElementById("jsData");
var outputEl = document.getElementById("output");
eval(dataTextarea.value);
//outputEl.innerHTML = TrimPath.processDOMTemplate("template_jst", data);
outputEl.innerHTML =TrimPath.parseTemplate(document.getElementById("template_jst").value, "template_jst").process(data);
</script>
</html>
作者：jackxiang@向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除
地址：https://jackxiang.com/post/1155/
版权所有。转载时必须以链接形式注明作者和原始出处及本声明！
学习js对象和数组的递归调用，用来遍历json数据
这个slide介绍了一些用vim写php的技艺评论列表
