当前位置:首页 > 开发 > 系统架构 > 架构 > 正文

mustache模板技术

发表于: 2011-06-28   作者:chenkangxian   来源:转载   浏览次数:
摘要: 项目首页:http://mustache.github.com/ 项目文档:http://mustache.github.com/mustache.5.html Demo:  http://mustache.github.com/#demo 简介: Mustache 是一个 Logic-less templates,原本是基于javascript 实现的模板引擎,类似于 fr
项目首页: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文件,拷贝如下代码:
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}}也是会显示出来的
		String templete = "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>();
		ctx.put("name", "Chris");
		ctx.put("value", "10000");
		ctx.put("taxed_value", "10000 - (10000 * 0.4)");
		ctx.put("in_ca", "true");
		
		String result = Mustache.compiler().compile(templete).execute(ctx);
		 
		
		System.out.println(result);
	}
	


}




输出:

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文件,并将如下代码拷入:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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;  
data = {  
    name : "Some Tuts+ Sites",  
    sites: ["Nettuts+", "Psdtuts+", "Mobiletuts+"],  
    url : function () {  
        return function (text, render) {  
            text = render(text);  
            var url = text.trim().toLowerCase().split('tuts+')[0] + '.tutsplus.com';  
            return '<a href="' + url + '">' + text + '</a>';  
        }  
    }  
};    
template = "<h1> {{name}} </h1>" +
			"<ul> {{#sites}}" + 
			"<li> {{#url}} {{.}} {{/url}} </li>" +  
			"{{/sites}}  </ul>" ; 
html = Mustache.to_html(template, data);  
document.write(html);
window.alert(html);
</script>
</body>
</html>


mustache模板技术

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
作者:zccst 模板: 1)js模板可以是一个html文件。 模板文件.html <h1>Hello {{name}}, it is
作者:zccst jquery.mustache是用jQuery做了一层封装,提供了以下几个方法,让模板使用更便捷。 参考
作者:zccst 模板已是第二次接触,第一次使用模板记得是在十分系统里渲染页面时使用,当时已做到熟练
作者:zccst 本节要点是子模块(partials)和分隔符(delimiter)等 1,子模块(partials) /* {{>
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决
<iframe align="top" marginwidth="0" marginheight="0" src="http://www.zealware.com/csdnblog0
《加速Java应用开发速度》系列目录: 加速Java应用开发速度1——加速spring/hibernate应用调试时启
《加速Java应用开发速度》系列目录: 加速Java应用开发速度1——加速spring/hibernate应用调试时启
《加速Java应用开发速度》系列目录: 加速Java应用开发速度1——加速spring/hibernate应用调试时启
《加速Java应用开发速度》系列目录: 加速Java应用开发速度1——加速spring/hibernate应用调试时启
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号