TrimPath是javascript模板引擎。

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

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

  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

trimpath javascript的学习的更多相关文章

  1. 正则表达式（javascript）学习总结

    正则表达式在jquery.linux等随处可见,已经无孔不入.因此有必要对这个工具认真的学习一番.本着认真.严谨的态度,这次总结我花了近一个月的时间.但本文无任何创新之处,属一般性学习总结. 一.思考 ...

  2. 大量Javascript/JQuery学习教程电子书合集

    ［推荐分享］大量Javascript/JQuery学习教程电子书合集,送给有需要的人   不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pd ...

  3. ［推荐分享］大量Javascript/JQuery学习教程电子书合集，送给有需要的人

    不收藏是你的错^_^. 经证实,均可免费下载. 资源名称 资源大小   15天学会jQuery(完整版).pdf 274.79 KB   21天学通JavaScript(第2版)-顾宁燕扫描版.pdf ...

  4. JavaScript 基础学习1-day14

    JavaScript 基础学习1 知识预览JavaScript概述二 JavaScript的基础三 JavaScript的对象BOM对象DOM对象实例练习js扩展 JavaScript概述 JavaS ...

  5. JavaScript正则表达式学习笔记(二) - 打怪升级

    本文接上篇,基础部分相对薄弱的同学请移步<JavaScript正则表达式学习笔记(一) - 理论基础>.上文介绍了8种JavaScript正则表达式的属性,本文还会追加介绍几种JavaSc ...

  6. 初步总结javascript中学习DOM之前的知识

    嘿嘿,又到了周末时间,周六其实就是总结这周的学习的,记得周二周三刚开始接触javascript时间,还是不知道怎么学习的,就感觉找不到方向,那时间学习的只是总结了一些简单的定义或者是学习结构,今天就把 ...

  7. JavaScript紧凑学习

    JavaScript紧凑学习 windows本地,调用命令行: win键+R 键入cmd , (cmd是Command 命令行 简称) 目录是C盘下的 C:\Users\Administrator&g ...

  8. javascript正则表达式 - 学习笔记

    JavaScript 正则表达式 学习笔记 标签(空格分隔): 基础 JavaScript 正则表达式是用于匹配字符串中字符组合的模式.在javascript中,正则表达式也是对象.这些模式被用于Re ...

  9. JavaScript Shell学习分享

    目录 JavaScript Shell学习分享 简介 安装 使用原因 小结 JavaScript Shell学习分享 简介 JavaScript Shell是由Mozilla提供的综合JavaScri ...

随机推荐

  1. 关于JavaScript中的escape、encodeURI和encodeURIComponent

    此文内容与关于JavaScript中的编码和解码函数 关联 escape() 方法: 采用ISO Latin字符集对指定的字符串进行编码.所有的空格符.标点符号.特殊字符以及其他非ASCII字符都将被 ...

  2. ajax实现下载功能

    ajax实现下载功能 适用场景:由于点击按钮下载excel响应时间过长,此时间段加入加载样式(灰色层.加载动画): 浏览器弹出下载框后,上面的加载样式去掉.  方     法 :使用jquery.fi ...

  3. 【openstack N版】——走进云计算

    一．云计算 云计算是一种按使用量付费的模式,这种模式提供可用的.便捷的.按需的网络访问,进入可配置的计算资源共享池(资源包括:网络.服务器.存储.应用软件.服务),这些资源能够被快速提供,只需投入很少 ...

  4. Algorithms(4th)谢路云译大纲总结（附实现源码）

    前言: 此算法书可以说是Java程序开发者的福音.里面涉及近50种计算机领域的经典算法,几位作者花了近40年的时间才完成这本著作.秉着对作者的敬仰与对算法的兴趣,我多次翻阅此书,而且常常被书中的经典算 ...

  5. 启动APEX

    --  查看数据库参数 SQL>  select * from nls_database_parameters; -- 查看数据库基本信息 SQL>  select * from v$da ...

  6. .net 爬虫技术

    关于爬虫 从搜索引擎开始,爬虫应该就出现了,爬的对象当然也就是网页URL,在很长一段时间内,爬虫所做的事情就是分析URL.下载WebServer返回的HTML.分析HTML内容.构建HTTP请求的模拟 ...

  7. .Net小白的第一篇博客

    2016年8月8日,经过了一周的纠结.我决定放弃了,原来学了六年并且工作两年的学前教育,走上了开发的道路.我认为生活就应该这样,就应该充满挑战,而不是每天在重复相同的工作!作为插班生的我,于2016年 ...

  8. 【Java基础】反射机制

    反射 反射可以使我们很方便的创建灵活的代码,这些代码可以在运行时装配,无需在组件之间进行源代码链接.反射允许我们在编写和执行时,使我们的代码能够接入装载到JVM中的类的内部信息,而不是源代码中选定的类 ...

  9. 规范 : jobbox 中英文

    中英文是为了candidate 可以看到不同的post job 语言. e.g. 如果是contact person 的“designation” ,这个不会显示在post job 里,目的只是给em ...

  10. MSCRM 通过Ajax调用WCF服务

    Call WCF Service from Dynamics CRM using AJAX A couple of days back, I had one of my ex-colleagues c ...