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. SysLog简介和java操作实例

    什么是SysLog syslog协议属于一种主从式协议:syslog发送端会传送出一个小的文字讯息(小于1024字节)到syslog接收端.接收端通常名为“syslogd”.“syslog daemo ...

  2. Windows程序员必须知道的字符编码和字符集

     字符编码 (Character encoding) 在存储和传递文本过程中,为了使得所有电脑都能够正确的识别出文本内容,需要有一个统一的规则. 2. 字符集 (Character Set) ) 一般 ...

  3. android学习17——命令行建gradle工程

    使用命令行建gradle工程要涉及到几个工具的版本. 1.gradle的版本.这个用gradle -version查到. 2.SDK BuildTools的版本. 这个要先配好SDK的环境变量,然后在 ...

  4. Python之路--你不知道的platform

    某次在查看测试机(Ubuntu)发行版本时,发现得到的结果并不准确:本应得到Ubuntu,结果显示的却是Debian,大致代码如下 ... distribution_name = ['centos', ...

  5. linux系统端口查看和占用的解决方案

    使用netstat命令查看端口占用情况 netstat -tln 查看什么程序占用端口 netstat -tlnp 过滤端口 netstat -tlnp |grep  8080 杀掉进程 kill - ...

  6. List实现行转列的通用方案

    最近在做报表统计方面的需求,涉及到行转列报表.根据以往经验使用SQL可以比较容易完成,这次决定挑战一下直接通过代码方式完成行转列.期间遇到几个问题和用到的新知识这里整理记录一下. 阅读目录 问题介绍 ...

  7. DbUtils类基本使用

    一.commons-dbutils简介 commons-dbutils 是 Apache 组织提供的一个开源 JDBC工具类库,它是对JDBC的简单封装,学习成本极低,并且使用dbutils能极大简化 ...

  8. Jquery中的重置

     提交表单是像下面这样的:代码 $('#myform').submit() $('#myform').submit() 所以,想当然的认为,重置表单,当然就是像下面这样子喽:代码 $('#myform ...

  9. CSS,注意点！！！！！！！

    css 一.整体布局 1.创建一个html标签 2.创建三个div标签(分别是网页的头部,中间,和底部三部分) 3.一般都用class选择器 4.用css给body标签加个 margin:0(用于消除 ...

  10. github学习（二）

    Git学习(一) 学习github一定要学会git,否则在后续的github运用中会出现很多问题. 1.安装Git: Mac自带Git,Windows需要自己安装. 2.配置git: 配置user.n ...