trimpath javascript的学习

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

秒客网

trimpath javascript的学习

相关文章