mustache模板技术

项目首页:http://mustache.github.com/ 
项目文档:http://mustache.github.com/mustache.5.html 
Demo:  http://mustache.github.com/#demo 

简介: 
Mustache 是一个 Logic-less templates,原本是基于javascript 实现的模板引擎,类似于 freemark和valicity ,但是比freemark和valicity更加轻量级更加容易使用,经过拓展目前支持javascript,java,.NET,PHP,C++等多种平台下开发! 

Mustache.java开发 

从http://jmustache.googlecode.com/svn位置检出mustache.java项目代码 
将com.samskivert.mustache包下三个.java文件拷贝到项目目录下 

新建TestMustache.java文件,拷贝如下代码: 

Java代码   收藏代码
  1. package cn.mustache.test;  
  2.   
  3. import java.util.HashMap;  
  4. import java.util.Map;  
  5. import com.samskivert.mustache.Mustache;  
  6.   
  7. public class TestMustache {  
  8.   
  9.     /** 
  10.      * Last Modification Time: 2011-6-27 
  11.      * 
  12.      * @param args 
  13.      */  
  14.     public static void main(String[] args) {  
  15.           
  16.                   
  17.         //前面加#号的话,如果{{taxed_value}}也是会显示出来的  
  18.         String templete = "Hello {{name}} \n" +  
  19.                             "You have just won ${{value}}! \n" +  
  20.                             "{{#in_ca}} " +  
  21.                             "Well, ${{taxed_value}}, after taxes. \n" +  
  22.                             "{{/in_ca}} ";  
  23.           
  24.         Map<String, Object> ctx = new HashMap<String, Object>();  
  25.         ctx.put("name""Chris");  
  26.         ctx.put("value""10000");  
  27.         ctx.put("taxed_value""10000 - (10000 * 0.4)");  
  28.         ctx.put("in_ca""true");  
  29.           
  30.         String result = Mustache.compiler().compile(templete).execute(ctx);  
  31.            
  32.           
  33.         System.out.println(result);  
  34.     }  
  35.       
  36.   
  37.   
  38. }  



输出: 

Hello Chris 
You have just won $10000! 
Well, $10000 - (10000 * 0.4), after taxes. 


解析: 
templete为输出内容的模板,将map类型的ctx填充到templete中,经过编译和执行,便会按照模板生成result 


顺便介绍一下基于javascript的开发: 
从https://github.com/janl/mustache.js上download 下mustache.js文件 
在项目下建js文件夹将mustache.js拷入 

新建index.html文件,并将如下代码拷入: 
Html代码   收藏代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  5. <script type="text/javascript" src="js/mustache.js""></script>  
  6. <title>test mustache</title>  
  7. </head>  
  8. <body>  
  9. <script language="javascript">  
  10.   
  11. var data, template, html;    
  12. data = {    
  13.     name : "Some Tuts+ Sites",    
  14.     sites: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],    
  15.     url : function () {    
  16.         return function (text, render) {    
  17.             text = render(text);    
  18.             var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';    
  19.             return '<a href="' + url + '">' + text + '</a>';    
  20.         }    
  21.     }    
  22. };      
  23. template = "<h1> {{name}} </h1>" +  
  24.             "<ul> {{#sites}}" +   
  25.             "<li> {{#url}} {{.}} {{/url}} </li>" +    
  26.             "{{/sites}}  </ul>" ;   
  27. html = Mustache.to_html(template, data);    
  28. document.write(html);  
  29. window.alert(html);  
  30. </script>  
  31. </body>  
  32. </html>  

你可能感兴趣的:(mustache)