<![CDATA[向东博客 专注WEB应用 构架之美 --- 构架之美，在于尽态极妍 | 应用之美，在于药到病除]]> http://www.jackxiang.com/index.php zh-cn http://www.jackxiang.com/post// <![CDATA[js模板技术，和smarty有点类似]]> jack <xdy108@126.com> Tue, 22 Jul 2008 10:17:04 +0000 http://www.jackxiang.com/post// <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>
]]> http://www.jackxiang.com/post//#blogcomment <![CDATA[[评论] js模板技术，和smarty有点类似]]> <user@domain.com> Thu, 01 Jan 1970 00:00:00 +0000 http://www.jackxiang.com/post//#blogcomment