`

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介绍

    Trimpath JavaScript 的社区资源包括项目wiki、十分钟简介、API文档、标记语法、标准修饰符、下载链接、浏览器兼容性列表以及在线演示,这些都是开发者学习和探索Trimpath JavaScript 功能的重要参考资料。...

    trimpath 前端模板引擎

    3. **编译与性能**:TrimPath模板在运行前会被编译成JavaScript函数,执行效率高。预编译后的模板在多次渲染时能避免重复解析,提高性能。 4. **安全**:通过默认的HTML转义机制,TrimPath有助于防止跨站脚本(XSS)...

    JSON 学习之完全手册 图文

    JSON 学习之完全手册 图文 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。它基于JavaScriptprogramming language,标准ECMA-262第三版中定义。JSON...

    bbb-tool:BigBlueButton Sakai集成

    并将其添加到网站日历中通知-(可选)向会议参与者发送电子邮件通知简单性-用户界面设计简单快速-Ajax驱动的界面(Javascript + JSON + Trimpath模板)可提供良好的最终用户体验和较低的服务器负载RESTful-通过...

Global site tag (gtag.js) - Google Analytics