mustache模板技术(转)

2023-07-23 18:20:16

项目首页：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代码

package cn.mustache.test;
import java.util.HashMap;
import java.util.Map;
import com.samskivert.mustache.Mustache;
public class TestMustache {
/**
* Last Modification Time: 2011-6-27
*
* @param args
*/
public static void main(String[] args) {
//前面加#号的话，如果{{taxed_value}}也是会显示出来的
"Hello {{name}} \n" +
"You have just won ${{value}}! \n" +
"{{#in_ca}} " +
"Well, ${{taxed_value}}, after taxes. \n" +
"{{/in_ca}} ";
Map<String, Object> ctx = new HashMap<String, Object>();
"name", "Chris");
"value", "10000");
"taxed_value", "10000 - (10000 * 0.4)");
"in_ca", "true");
String result = Mustache.compiler().compile(templete).execute(ctx);
}
}

输出:

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

>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="js/mustache.js""></script>
<title>test mustache</title>
</head>
<body>
<script language="javascript">
var data, template, html;
name : "Some Tuts+ Sites",
return function (text, render) {
text = render(text);
url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';
<a href="' + url + '">' + text + '</a>';
}
template = "<h1> {{name}} </h1>" +
<ul> {{#sites}}" +
<li> {{#url}} {{.}} {{/url}} </li>" +
</ul>" ;
Mustache.to_html(template, data);
window.alert(html);
</script>
</body>
</html>

码农公寓

相关文章