mustache模板技术(转)

时间:2024-11-10 17:37:44

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

转载自:http://blog.****.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代码  mustache模板技术(转)
  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. //前面加#号的话,如果{{taxed_value}}也是会显示出来的
  13. "Hello {{name}} \n" +
  14. "You have just won ${{value}}! \n" +
  15. "{{#in_ca}} " +
  16. "Well, ${{taxed_value}}, after taxes. \n" +
  17. "{{/in_ca}} ";
  18. Map<String, Object> ctx = new HashMap<String, Object>();
  19. "name", "Chris");
  20. "value", "10000");
  21. "taxed_value", "10000 - (10000 * 0.4)");
  22. "in_ca", "true");
  23. String result = Mustache.compiler().compile(templete).execute(ctx);
  24. }
  25. }

输出:

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代码  mustache模板技术(转)
  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. <a 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>