项目首页：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更加轻量级更加容易使用，经过拓展目前支持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. 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代码  
  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>

mustache模板技术(转)的更多相关文章

  1. mustache模板技术

    一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...

  2. HTML5触屏版多线程渲染模板技术分享

    前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...

  3. JS之模板技术（aui / artTemplate）

    artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...

  4. MVC下的客户端模板技术

    1.引言 在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息.例如:在一个商品列表,我们点击某一样的商品,查看该商品的 ...

  5. 再谈前端HTML模板技术

    在web2.0之前,写jsp的时候虽然有es和JSTL,但是还是坚持jsp.后面在外包公司为了快速交货,还是用了php Smart技术. web2.0后,前端模板技术风行. 代表有如下三大类: Str ...

  6. Smarty模板技术学习

    模板引擎技术:使得php代码和html代码分离的技术就称为"模板引擎技术" 自定义smarty模板技术实现 <?php //迷你smarty原理 class MiniSmar ...

  7. smarty模板技术

    一.什么是smarty?smarty是一个使用php写出来的模板php模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用php程序员同美工分离,使用的程序员改变程序的逻辑内容不会影响到美 ...

  8. trait与policy模板技术

    trait与policy模板技术 我们知道,类有属性(即数据)和操作两个方面.同样模板也有自己的属性(特别是模板参数类型的一些具体特征,即trait)和算法策略(policy,即模板内部的操作逻辑). ...

  9. 快速开发框架，及库存管理系统，基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。

    快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...

随机推荐

  1. javascript获取日期的年，月，日

    var date = new Date(strTime); return date.getFullYear()+"-"+(date.getMonth()+1)+"-&qu ...

  2. cookie 与 session 的差别、联系

    1.存放位置: Session 存放在server端. Cookie 存放在client: 2.保存形式: Session保存在server的内存中(在server端设置超时时间,与浏览器设置无关): ...

  3. ibatis-java.lang.RuntimeException: Error setting property 'setFileSize'

    ibatis查询问题:      ibatis-java.lang.RuntimeException: Error setting property 'setFileSize'

  4. 【MyBatis学习08】高级映射之一对一查询

    从这一篇博文开始,将总结一下mybatis中的几个高级映射,即一对一.一对多.多对多查询,这篇先总结一下mybatis中的一对一查询.  为了模拟这些需求,事先要建立几个表,不同的表之间将对应上面提到 ...

  5. JSON.parse 函数

    JSON.parse 函数 JavaScript JSON.parse 函数 (JavaScript) 将 JavaScript 对象表示法 (JSON) 字符串转换为对象. JSON.parse(t ...

  6. 各种broker对比

    broker的主要职责是接受发布者发布的所有消息,并将其过滤后分发给不同的消息订阅者.如今有很多的broker,下面就是一张关于各种broker对比的图片: 在使用mosquitto时,如果想使用集群 ...

  7. ie6、ie7下JSON.parse JSON未定义的解决方法

    解决方法一: var jsons = req.responseText; var s; if (typeof(JSON) == 'undefined'){ s = eval("(" ...

  8. 今日头条&58转转笔试

    昨天参加今日头条和58转转的笔试,因为时间上有冲突,所以主要选择参加头条的笔试. 先说头条: 头条的题型: 一道改错题 三道编程题 一道设计题 感受: 做题目的的时候还是有点紧张的,因为突然遇到题目需 ...

  9. Jquery全选与反选点击执行一次的解决方案

    在做项目时遇到一个bug,checkbox全选与反选功能,只能点击一次,再点就不起作用了,为了解决此问题,我查找了好多资料,下面把具体解决方案整理分享给大家,需要的朋友可以参考下: 代码需求, 使用a ...

  10. 使用BMap.Label给百度地图的BMap.Marker上加上数字序号

    marker = new BMap.Marker(pointList[i]) marker.setLabel(getNumberLabel(i)); function getNumberLabel(n ...