博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
trimpath javascript的学习
阅读量:6283 次
发布时间:2019-06-22

本文共 2386 字,大约阅读时间需要 7 分钟。

hot3.png

 
TrimPath是javascript模板引擎。
这几天有一个项目涉及到trimpath这个框架,所以就花了一点时间研究了一下,这个框架和别的javascript框架不太一样的地方就是模 板的概念,就是页面中如果引入这个框架的话,就可以像jsp或着Asp那样直接在页面中混合写javascript和的代码,不用其它框架一样在 javascript里首先取得页面控件的值,然后修改,然后再在javascript代码里赋值,这些是我的主要印像。
下面先贴出来一个demo,从这个看容易入手,用这个demo前当然先要先加入像用其它框架一样加入这个框架的代码
框架的官网主页:
从上面下一个名字叫template.js的框架文件,这个文件可以从官网上释放的最新的包中找到。例如根据我现在下的版本可以在这里找到
Java代码  
收藏代码
  1. trimpath-junction-1.1.22/junction_release/public/javascripts/trimpath  
下面贴出demo的源码
Java代码  
收藏代码
  1. <html>  
  2.     <head>  
  3.       <script language="javascript" src="template.js"></script>  
  4.     </head>  
  5. <body>  
  6.   <div id="outputDiv">  
  7.   </div>  
  8.   <script language="javascript">  
  9.     var data = {  
  10.         products : [ { name: "mac", desc: "computer",       
  11.                        price: 1000, quantity: 100, alert:null },  
  12.                      { name: "ipod", desc: "music player",  
  13.                        price:  200, quantity: 200, alert:"on sale now!" },  
  14.                      { name: "cinema display", desc: "screen",        
  15.                        price:  800, quantity: 300, alert:"best deal!" } ],  
  16.         customer : { first: "John", last: "Public", level: "gold" }  
  17.     };  
  18.   </script>  
  19. <textarea id="cart_jst" style="display:none;">  
  20.     Hello ${customer.first} ${customer.last}.<br/>  
  21.     Your shopping cart has ${products.length} item(s):  
  22.     <table>  
  23.      <tr><td>Name</td><td>Description</td>  
  24.          <td>Price</td><td>Quantity & Alert</td></tr>  
  25.      {
    for p in products}  
  26.          <tr><td>${p.name|capitalize}</td><td>${p.desc}</td>  
  27.              <td>$${p.price}</td><td>${p.quantity} : ${p.alert|default:""|capitalize}</td>  
  28.              </tr>  
  29.      {forelse}  
  30.          <tr><td colspan="4">No products in your cart.</tr>  
  31.      {/for}  
  32.     </table>  
  33.     {
    if customer.level == "gold"}  
  34.       We love you!  Please check out our Gold Customer specials!  
  35.     {
    else}  
  36.       Become a Gold Customer by buying more stuff here.  
  37.     {/if}  
  38.   </textarea>  
  39.   <script language="javascript">  
  40.     // The one line processing call...  
  41.     var result = TrimPath.processDOMTemplate("cart_jst", data);  
  42.     // Voila!  That's it -- the result variable now holds  
  43.     // the output of our first rendered JST.  
  44.   
  45.     // Alternatively, you may also explicitly parse the template...  
  46.     var myTemplateObj = TrimPath.parseDOMTemplate("cart_jst");  
  47.   
  48.     // Now, calls to myTemplateObj.process() won't have parsing costs...  
  49.     var result  = myTemplateObj.process(data);  
  50.   
  51.     // Setting an innerHTML with the result is a common last step...  
  52.     document.getElementById("outputDiv").innerHTML = result;  
  53.     // You might also do a document.write() or something similar...  
  54.   </script>  
  55. </body>  
  56. </html>  
研究上面的demo就基本可以掌握这个框架的要点
下面的路径是在网上搜索到的一个教程,说的挺详细的,这个教程也是从这个demo开始的,也有对个demo的详细分析,建议看看这个教程

转载于:https://my.oschina.net/u/267384/blog/160037

你可能感兴趣的文章
【转】围观 Joomla, Wordpress 和 Drupal
查看>>
用JS做关灯游戏(初级)
查看>>
vue.js学习 自定义过滤器使用(2)
查看>>
laravel资源
查看>>
各种排序讲解
查看>>
Sql Server 网络配置
查看>>
要在VR潮流中分一杯羹,首先要搞清楚方向再创业
查看>>
vscode setting.jsonxx
查看>>
网站版权日期的处理
查看>>
Maven之debug技巧
查看>>
server2008远程开端口的方法
查看>>
启用用户布局表格
查看>>
Delphi异形窗口之PNG
查看>>
mysql数据库优化(二)
查看>>
linux下部署.net 项目 参考网址
查看>>
采药 NOIP 2005 普及组
查看>>
自动化构建工具
查看>>
工作流模式每个工作流引擎都会支持多种方式的表单。目前大家讨论到的大概有三种。 动态表单 外置表单 普通表单...
查看>>
CDZSC_2015寒假新人(1)——基础 g
查看>>
Cloud9 on Docker镜像发送
查看>>