trimpath javascript的学习

amyleeYMY

2012-08-30

TrimPath是javascript模板引擎。

这几天有一个项目涉及到trimpath这个框架，所以就花了一点时间研究了一下，这个框架和别的javascript框架不太一样的地方就是模板的概念，就是页面中如果引入这个框架的话，就可以像jsp或着Asp那样直接在页面中混合写javascript和的代码，不用其它框架一样在javascript里首先取得页面控件的值，然后修改，然后再在javascript代码里赋值，这些是我的主要印像。

下面先贴出来一个demo,从这个看容易入手，用这个demo前当然先要先加入像用其它框架一样加入这个框架的代码

框架的官网主页：

http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

从上面下一个名字叫template.js的框架文件，这个文件可以从官网上释放的最新的包中找到。例如根据我现在下的版本可以在这里找到

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

javascript td