<p><span style="color: #cccccc;">转载网址： http://bbs.<span class="t_tag">java</span>script.com.cn/simple/index.<span class="t_tag">php</span>?t1022.html</span><br><br>官方网址：<a href="http://trimpath.com/project/wiki/JavaScriptTemplates" rel="noopener noreferrer" target="_blank">http://trimpath.com/project/wiki/JavaScriptTemplates</a><br><br>Trimpath JavaScript 是个轻量级的，基于JavaScript的，跨浏览器，采用APL/GPL开放源代码协议的，可以让你轻松进行基于模板编程方式的纯JS引擎。<br><br>它有如下的特点：<br>1、采用标准的JavaScript编写，支持跨浏览器<br>2、模板语法类似于：FreeMarker，Velocity,Smarty<br>3、采用简易的语言来描述大段的字串以及Dom/DHTML操作<br>4、可以很方便的解析XML<span class="t_tag">文件</span>格式的<span class="t_tag">数据</span>到指定模板。<br><br>采 用该引擎，可以让它来完全处理View方面的事情，<span class="t_tag">服务</span>端Module直接输出Data就可以。让你的MVC模式连成一体，而且由于View由浏览器来处 理，大大减少了<span class="t_tag">服务器</span>的负担，用来构建Ajax<span class="t_tag">技术</span>的<span class="t_tag">网络</span>信息<span class="t_tag">系统</span><span class="t_tag">应用</span>是一个非常好的选择。下面将通过翻译该站的文章来给大家介绍这个JST引擎的使用。<br><br>网站地址：<br><br> <a href="http://code.google.com/p/trimpath/wiki/JavaScriptTemplates" rel="noopener noreferrer" target="_blank">http://code.<span class="t_tag">google</span>.com/p/trimpath/wiki/JavaScriptTemplates</a><br><br>如果大家等不及看我翻译或者不满意翻译质量，请看上面网站的英文原文。<br><br>快速演示：<br> </p>
<div class="blockcode">
<div id="code0">
<ol><li> <html></li><li> <head></li><li> <script language="javascript" src="trimpath/template.js"></script></li><li> </head></li><li><body></li><li> <div id="outputDiv"></li><li> </div></li><li> <script language="javascript"></li><li> var data = {<!-- --></li><li> products : [ { name: "mac", desc: "computer", </li><li> price: 1000, quantity: 100, alert:null },</li><li> { name: "ipod", desc: "music player",</li><li> price: 200, quantity: 200, alert:"on sale now!" },</li><li> { name: "cinema display", desc: "screen", </li><li> price: 800, quantity: 300, alert:"best deal!" } ],</li><li> customer : { first: "John", last: "Public", level: "gold" }</li><li> };</li><li> </script></li><li><textarea id="cart_jst" style="display:none;"></li><li> Hello ${customer.first} ${customer.last}.<br/></li><li> Your shopping cart has ${products.length} item(s):</li><li> <table></li><li> <tr><td>Name</td><td>Description</td></li><li> <td>Price</td><td>Quantity & Alert</td></tr></li><li> {for p in products}</li><li> <tr><td>${p.name|capitalize}</td><td>${p.desc}</td></li><li> <td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td></li><li> </tr></li><li> {forelse}</li><li> <tr><td colspan="4">No products in your cart.</tr></li><li> {/for}</li><li> </table></li><li> {if customer.level == "gold"}</li><li> We love you! Please check out our Gold Customer specials!</li><li> {else}</li><li> Become a Gold Customer by buying more stuff here.</li><li> {/if}</li><li> </textarea></li><li> <script language="javascript"></li><li> // The one line processing call...</li><li> var result = TrimPath.processDOMTemplate("cart_jst", data);</li><li> // Voila! That's it -- the result variable now holds</li><li> // the output of our first rendered JST.</li><li></li><li> // Alternatively, you may also explicitly parse the template...</li><li> var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");</li><li></li><li> // Now, calls to myTemplateObj.process() won't have parsing costs...</li><li> var result = myTemplateObj.process(data);</li><li></li><li> // Setting an innerHTML with the result is a common last step...</li><li> document.getElementById("outputDiv").innerHTML = result;</li><li> // You might also do a document.write() or something similar...</li><li> </script></li><li></body></li><li></html></li></ol>
</div>
<em>复制代码</em>
</div>
<br>实际效果：
<br>
<img alt="JST_DEMO.jpg" id="aimg_281524" src="https://beijingoptbbs.oss-cn-beijing.aliyuncs.com/cs/5606289-a817093d74a29fa70b95c431a081d56c.jpg" width="506">
<br>
<br>
<br>
<br>
<br>JST十分钟简介
<br>
<br>JST API
<br>JST Markup Syntax
<br>JST Standard Modifiers
<br>JST Downloads
<br>JST Community Wiki
<br>JST Browser |
|
转播
