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. IOS缓存管理之PINCache使用

    前言: 今年重点在于公司iOS架构的梳理工作,上周整理了http请求接口管理与解耦,接下来准备整理一下项目中的缓存处理,目前项目中使用的是PINCache,去年加入这个开源框架时并没有对这个框架进行了 ...

  2. [Spark] - Spark部署安装

    环境:centos6.0 虚拟机 搭建单机版本的spark 前提条件:搭建好hadoop环境 1. 下载scala进行安装 只需要设置环境变量SCALA_HOME和PATH即可 export SCAL ...

  3. node.js 学习随笔

    一,cnmp的操作: 1,cnmp info jquery查询jquery的版本: 2,cnmp install jquery@1.11.1:安装: 3,cnmp list查询所有下载的内容: 4,c ...

  4. vue生命周期的介绍

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. 定制 cloud-init - 每天5分钟玩转 OpenStack（155）

    这是 OpenStack 实施经验分享系列的第 5 篇. 对于 Linux 镜像,cloud-init 负责 instance 的初始化工作.cloud-init 功能很强大,能做很多事情,而且我们可 ...

  6. show_you_my_codes 001

    program 001 第 0001 题:做为 Apple Store App 独立开发者,你要搞限时促销,为你的应用生成激活码(或者优惠券), 使用 Python 如何生成 200 个激活码(或者优 ...

  7. Mvc动态注册HttpModule详解

    序言 注册Httpmodule可以让我们使用HttpApplication对象中的处理管道事件.目前大家所熟知的应该有2种方式来使用HttpApplication对象中的处理管道事件.第一种是通过Gl ...

  8. Sicily 1151 魔板

    Constraints Time Limit: 1 secs, Memory Limit: 32 MB , Special Judge Description 魔板由8个大小相同方块组成,分别用涂上不 ...

  9. 微信内置浏览器私有接口WinXinJsBridge介绍

    关于微信内置浏览器私有接口WeiXinJsBridge,只是之前接触过的一个微信公众号项目中遇到过,不过并没有深入研究过,可以说并没有了解过... 刚好今天无意中看到了这方面的知识,就补习一下,弥补一 ...

  10. 1. Two Sum★

    题目内容:Given an array of integers, return indices of the two numbers such that they add up to a specif ...