首页 > 代码库 > trimpath javascript的学习
trimpath javascript的学习
TrimPath是javascript模板引擎。
这几天有一个项目涉及到trimpath这个框架，所以就花了一点时间研究了一下，这个框架和别的javascript框架不太一样的地方就是模板的概念，就是页面中如果引入这个框架的话，就可以像jsp或着Asp那样直接在页面中混合写javascript和的代码，不用其它框架一样在javascript里首先取得页面控件的值，然后修改，然后再在javascript代码里赋值，这些是我的主要印像。
下面先贴出来一个demo,从这个看容易入手，用这个demo前当然先要先加入像用其它框架一样加入这个框架的代码
框架的官网主页：
http://code.google.com/p/trimpath/wiki/JavaScriptTemplates
从上面下一个名字叫template.js的框架文件，这个文件可以从官网上释放的最新的包中找到。例如根据我现在下的版本可以在这里找到
Java代码 
- trimpath-junction-1.1.22/junction_release/public/javascripts/trimpath
下面贴出demo的源码
<html> <head> <script language="javascript" src="template.js"></script> </head><body> <div id="outputDiv"> </div> <script language="javascript"> var data = { products : [ { name: "mac", 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" } }; </script><textarea id="cart_jst" style="display:none;"> 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> <script language="javascript"> // The one line processing call... var result = TrimPath.processDOMTemplate("cart_jst", data); // Voila! That‘s it -- the result variable now holds // the output of our first rendered JST. // Alternatively, you may also explicitly parse the template... var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst"); // Now, calls to myTemplateObj.process() won‘t have parsing costs... var result = myTemplateObj.process(data); // Setting an innerHTML with the result is a common last step... document.getElementById("outputDiv").innerHTML = result; // You might also do a document.write() or something similar... </script></body></html>
研究上面的demo就基本可以掌握这个框架的要点
下面的路径是在网上搜索到的一个教程，说的挺详细的，这个教程也是从这个demo开始的，也有对个demo的详细分析，建议看看这个教程
http://bbs.chinaunix.net/thread-735901-1-1.html
trimpath javascript的学习
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。