`
wenrunchang123
  • 浏览: 251190 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

trimpath 前端模板引擎

阅读更多

     Trimpath JavaScript 是个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。

     它有如下的特点:
     1、采用标准的JavaScript编写,支持跨浏览器
     2、模板语法类似于:FreeMarker,Velocity,Smarty
     3、采用简易的语言来描述大段的字串以及Dom/DHTML操作

      采用该引擎,可以让它来完全处理View方面的事情,服务端Module直接输出Data就可以。让你的MVC模式连成一体,而且由于View由浏览器来处 理,大大减少了服务器的负担,用来构建Ajax技术网络信息系统应用是一个非常好的选择。下面将通过翻译该站的文章来给大家介绍这个JST引擎的使用。

 

      官方网站:

      http://code.google.com/p/trimpath/wiki/JavaScriptTemplates

首先,在html页面上加载trimpath的js文件

      

<html>
    <head>
	<script language="javascript" src="trimpath-template-1.0.38.js"></script>
    </head>
</html>

 

接下来,创建一个标准的javascript数据,比如是数组或者是objects     

    
   

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

 
 然后,我们创建一个JST模板来读取上面的数据,同时把模板的样式设置为不可见

 

   

	     <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.</td>
				</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>

 

以下的代码展示怎样使用JST来处理模板

   

   

		 <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);     
			 //var result2 = myTemplateObj.process(differentData);      
			 // Setting an innerHTML with the result is a common last step...     
			 document.getElementById('test').innerHTML = result;     
			 // You might also do a document.write() or something similar...   
		 </script>

 

    页面展示的结果为:

  

Hello John Public.
Your shopping cart has 3 item(s):
Name	Description	Price	Quantity & Alert
MAC	computer	$1000	100 :
IPOD	music player	$200	200 : ON SALE NOW!
CINEMA DISPLAY	screen	$800	300 : BEST DEAL!
We love you! Please check out our Gold Customer specials!

 

   附件是以上描述的例子,供有兴趣的童鞋下载~~~

分享到:
评论

相关推荐

    TrimPath模板

    这个TrimPath文件对原来的TrimPath进行了扩展,使得在JSP页面也可以用@{value}的形式来生成模板。不影响原来的功能

    Trimpath整理教程

    Trimpath是一种模板引擎,专门设计用于简化动态网页的创建过程。它允许开发者通过简单的语法结构嵌入数据,从而在页面上动态生成内容。Trimpath支持多种模板语言,如FreeMarker、Velocity和Smarty,这些语言通常被...

    Trimpath介绍

    Trimpath JavaScript 是一款轻量级的JavaScript引擎,专注于模板编程,旨在简化Web开发中的视图层处理。它具有跨浏览器兼容性,支持多种操作系统,并且遵循APL/GPL开放源代码协议,允许开发者自由使用和修改代码。...

    Trimpath JavaScript

    Trimpath JavaScript 是不个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的

    CTemplate:快速JavaScript模板引擎(如smarty)。 与trimpath引擎高度兼容,但更短,更快

    它受到“ trimpath”引擎的启发,但是在我的测试中,该引擎的解析速度是它的两倍,并且处理速度要快10%。 它可以用作修剪路径的替代品。 我在某些环境(例如和它的板载软件)中使用了它。 表达式和表达式修饰符 $...

    JavaScript Template JST模板引擎

    Trimpath JavaScript 是不个轻量级的,基于JavaScript的,跨浏览器,采用APL/GPL开放源代码协议的,可以让你轻松进行基于模板编程方式的纯JS引擎。 它有如下的特点: 1、采用标准的JavaScript编写,支持跨浏览器 2...

    swato教程

    对于高度定制化的视图控件,开发者可以使用Template引擎(例如来自TrimPath的引擎)来创建自己的组件,只需实现`gotResult`和`gotError`这两个函数即可轻松地与SWATO远程调用功能集成。 #### 五、SWATO快速安装步骤...

    bbb-tool:BigBlueButton Sakai集成

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

    Doge-Loader:GoGolang的Cobalt Strike Shellcode Loader

    编译:go build -gcflags=-trimpath=$GOPATH -asmflags=-trimpath=$GOPATH -ldflags "-w -s -H windowsgui" 项目结构如下: main.go 主程序,用于远程下载shellcode并加载(需要自行上传shellcode(bin文件)并且修改...

    docker:flag provided but not defined:–network

    在使用docker run创建容器时,我指定的命令是: docker run –rm –name “complie-test” –network=host -v /home/test:/build reg.docker.xxx.xxx:1.0 bash -c “cd /build/docker && sh build.sh” ...

    JSON 学习之完全手册 图文

    JSON 学习之完全手册 图文 JSON(JavaScript Object Notation)是一种轻...* 介绍如何使用TrimPath Template进行JSON模版制作 在本手册中,我们将提供详细的实践示例和代码片段,帮助读者快速掌握JSON的使用和应用。

    铁刮痕:安全的基础映像,用于运行Go(或任何其他静态)应用程序

    ironpeakservices /铁刮用于运行Go应用程序的安全基础映像。 默认入口点是/app 。 docker pull ghcr.io/...trimpath -ldflags '-w -s -extldflags "-static"' -o /app /main.goFROM ghcr.io/ironpeakservices/i

    go1.12.6.zip

    3. **Go 构建命令**:`go build` 命令现在可以接受 `-trimpath` 标志,用于减少构建产物中的路径信息,提高安全性和构建的隐私性。 4. **Go 编译器优化**:Go 1.12 对编译器进行了优化,提升了代码的运行效率,特别...

    SVN清除.svn的python代码

    1. **路径处理**:在脚本的开头,`trimpath`函数被定义用来处理传入的路径字符串,移除首尾的双引号,确保路径的准确性。这是因为在命令行中输入路径时,路径字符串通常会被自动添加上双引号,这可能会导致后续的...

    Go-Build

    `-trimpath`选项可以移除源码路径,保护隐私。 6. **交叉编译**:Go-Build还支持跨平台编译,通过`GOOS`和`GOARCH`环境变量指定目标操作系统和架构。例如,`GOOS=windows GOARCH=amd64 go build`将生成适用于...

    Go语言中一些不常见的命令参数详解

    /Users/jbd/go/pkg/tool/darwin_amd64/compile -o $WORK/hello/perf.a -trimpath $WORK -p main -complete -buildid bbf8e880e7dd4114f42a7f57717f9ea5cc1dd18d -D _/Users/jbd/src/hello/perf -I $WORK -pack ./...

Global site tag (gtag.js) - Google Analytics