zoukankan      html  css  js  c++  java
  • trimpath javascript的学习

    TrimPath是javascript模板引擎。 

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

    下面先贴出来一个demo,从这个看容易入手,用这个demo前当然先要先加入像用其它框架一样加入这个框架的代码 
    框架的官网主页: 
    http://code.google.com/p/trimpath/wiki/JavaScriptTemplates 
    从上面下一个名字叫template.js的框架文件,这个文件可以从官网上释放的最新的包中找到。例如根据我现在下的版本可以在这里找到 

    Java代码  收藏代码
    1. 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 

  • 相关阅读:
    Hibernate使用笔记
    svn树冲突的解决方法
    SVN 清理失败的解决方法
    类的实现
    lua元表
    lua中table的常用方法
    C/C++作用域运算符::
    Cocos2d-x Lua 学习
    Lua学习
    吾 三十而望
  • 原文地址:https://www.cnblogs.com/zhishaofei/p/4269355.html
Copyright © 2011-2022 走看看