• mustache模板技术(转)


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

     

    转载自:http://blog.csdn.net/g_blue_wind/article/details/51434083

    简介: 
    Mustache 是一个 Logic-less templates,原本是基于JavaScript 实现的模板引擎,类似于 freemark和valicity ,但是比freemark和valicity更加轻量级更加容易使用,经过拓展目前支持javascriptJava,.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. import java.util.HashMap;  
    3. import java.util.Map;  
    4. import com.samskivert.mustache.Mustache;  
    5. public class TestMustache {  
    6.     /** 
    7.      * Last Modification Time: 2011-6-27 
    8.      * 
    9.      * @param args 
    10.      */  
    11. public static void main(String[] args) {  
    12.                   
    13. //前面加#号的话,如果{{taxed_value}}也是会显示出来的  
    14. "Hello {{name}}  " +  
    15. "You have just won ${{value}}!  " +  
    16. "{{#in_ca}} " +  
    17. "Well, ${{taxed_value}}, after taxes.  " +  
    18. "{{/in_ca}} ";  
    19.         Map<String, Object> ctx = new HashMap<String, Object>();  
    20. "name", "Chris");  
    21. "value", "10000");  
    22. "taxed_value", "10000 - (10000 * 0.4)");  
    23. "in_ca", "true");  
    24.         String result = Mustache.compiler().compile(templete).execute(ctx);  
    25.           
    26.     }  
    27.   
    28. }  




    输出: 

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


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

    l  语法解释:

     i.              对于对象数据Mustache也有其特殊的语法:{{#}}{{/}},如果所给定的数据源是一个对象数组,则可以使用该语法,很方便的用来循环展示。

     ii.             其中{{#}}标记表示从该标记以后的内容全部都要循环展示

     iii.            {{/}}标记表示循环结束。这种情况多用于table行的展示。

     iv.            上边我们有讲到{{#}}{{/}}这样的语法,除了上边的循环遍历之外,它还有另外的一层意思就是判空,如果{{#}}中的值为null或false或undefine则其标记内的内容则不展现

     v.             有了判空的方法当然还有与之相反的方法{{^}},该方法表示的意思与{{#}}意思相反。

     vi.            在某些时候,我们要绑定的数据源中可能会有一些html标记,如果单纯的采用{{}}这种方式来绑定的话,默认的会将html标记转义。为了解决防止绑定字段中的内容被转移我们可以这样做{{&}},这样就可以防止转义




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

    新建index.html文件,并将如下代码拷入: 

    Html代码  收藏代码
    1. >  
    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. var data, template, html;    
    11.     name : "Some Tuts+ Sites",    
    12.         return function (text, render) {    
    13. text = render(text);    
    14. url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';    
    15. <href="' + url + '">' + text + '</a>';    
    16.     }    
    17. template = "<h1> {{name}} </h1>" +  
    18. <ul> {{#sites}}" +   
    19. <li> {{#url}} {{.}} {{/url}} </li>" +    
    20. </ul>" ;   
    21. Mustache.to_html(template, data);    
    22. window.alert(html);  
    23. </script>  
    24. </body>  
    25. </html>  

     

  • 相关阅读:
    夺命雷公狗---ECSHOP---08---商品页的拇改成星星
    夺命雷公狗---ECSHOP---07---商品价格的遍历
    夺命雷公狗---ECSHOP---06---商品倒计时的实现
    WordPress博客密码忘记的解决方法
    夺命雷公狗---js_mv思路
    LAMP前一定要关闭防火墙
    夺命雷公狗---Smarty NO:25 缓存控制技术2(完结)
    夺命雷公狗---Smarty NO:24 缓存控制技术1
    夺命雷公狗---Smarty NO:23 常用方法
    夺命雷公狗---Smarty NO:22 常量—变量
  • 原文地址:https://www.cnblogs.com/widget90/p/7409882.html
Copyright © 2020-2023  润新知