`
chenkangxian
  • 浏览: 86694 次
  • 性别: Icon_minigender_1
  • 来自: 杭州
社区版块
存档分类
最新评论

mustache模板技术

    博客分类:
  • web
阅读更多
项目首页: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>


分享到:
评论
1 楼 Sweblish 2011-07-01  
  

相关推荐

    mustache.js

    客户端模板技术。增加html代码的可维护性。高效转换Html代码。

    mustache:Go语言中的胡子模板语言

    这是Go语言中的胡子模板语言的实现。 它受到启发,但它不是fork,而是经过改进的规范一致性的重新实现,更灵活的API(例如,对io.Writer和io.Reader支持)。 它是使用幻灯片中描述的化技术以及博客中有关功能选项...

    有渔微信小程序技术分析《五》Mustache语法要点总结

    小程序开发的wxml里,用到了Mustache语法。所以,非常有必要把Mustache研究下。...1、Mustache的模板语法很简单,就那么几个: {{keyName}} {{{keyName}}} {{#keyName}} {{/keyName}} {{^keyName}} {{/k

    Spring Data集成MyBatis完整源码解析

    共计296个文件,主要包括200个Java源码文件,以及39个VM模板、19个XML配置、7个SQL脚本、4个Markdown文档、2个属性文件、2个Shell脚本、2个工厂配置文件和2个Processor文件及2个Mustache模板。该模块特别强化了对...

    基于Python Django框架的jQuery AJAX交互源码实现

    - Mustache模板文件(.mustache)共65个,用于构建前端页面; - 文本文件(.txt)共62个,可能包含配置信息或日志等; - 编译后的Python文件(.pyc)共10个,为Python代码的编译版本; - Python源文件(.py)共10个...

    java餐饮门户源码-laa-pdfeforms:LAAPDF电子表格项目

    本文档的目的本文档的目的是获取可能与此实施相关的所有相关信息,包括非技术/业务和技术要求,以便作为任何人了解此实施的需要、目标和技术要求的单一参考。了解在撰写本文时如何看待它,实现细微差别。 建筑学 ...

    feedme:喜欢lunch.me但更好 - 寻找附近吃饭的地方

    对于以 JSON 形式返回的数据,我们使用 Mustache 模板来呈现结果,然后将其附加到 DOM。 我们还使用 HTML5 地理定位来获取浏览器的当前位置,并使用在谷歌地图上显示结果的位置。 该怎么办 将 API 调用的逻辑和...

    stripe-integration-sample-webapp:用于Lightrail-Stripe签出的示例Webapp项目

    通用显示代码是使用Mustache模板呈现的,但是任何类似的技术都可以。 配置中 此演示需要有关您的Stripe和Lightrail帐户的详细信息才能运行。 步骤1:设置环境配置 在shared目录内部,将文件.env.example复制到一个...

    sample-crud-mvc:样本 CRUD

    示例 CRUD 应用程序 这是示例 Java 应用程序,表示为: 后端的 前端的 应用技术 以下是基于 Java 的技术堆栈: — 嵌入式 Web 容器;... HandlebarsJS — 带有预编译功能的类似Mustache的模板引擎; G

    简单谈谈Vue 模板各类数据绑定

    因为这已不是遁隐修行,而是职场卖命,唯有先快速解决需求,方能攫取更为充盈的时间去深究技术机理,以使臻于更强,更强而优于快,如此优良循环得以形成。言归正传,作为前端ER,一度觉得,这 Vue 的诞生,好比一柄...

    empty_project

    使用 Hogan(一个 Mustache 实现)进行模板化——http: 文档生成由YUIDoc(使用JSDoc语法) - 图书馆 requirejs 的代码模块化 -- i18n 由 requirejs!i18n -- 下划线的实用函数 -- jQuery 的 DOM 操作——...

    code-samples:精选作品

    代码样例 最近项目中的部分作品。... 随着前端技术的不断变化,这个副项目将成为不断改进我的构建过程(请参阅gulpfile.babel.js ),学习ES6的动手工具并改善站点性能的地方,同时又能高度关注设计细节。

    酷炫的爆栈网源码.zip

    mustache [GitHub] babel [GitHub] LESS Sass(SCSS) Stylus LESS [GitHub] Hat [GitHub] Compass [GitHub] Bourbon [GitHub] ...

    hesperides-gui:通过 REST API 或 Web 应用程序(前端部分)提供通用文本文件模板和属性编辑的配置管理工具

    Hesperides 是一个开源工具,从给定的模板生成配置文件,带有和它在每个环境中存储的属性。 后端位于此 repo 中: : 。 开发状态:该项目目前由维护。 现场演示 基本身份验证的凭据: 用户名: user或prod 密码...

    frontend_store:电子商务前端测试

    我将jQuery用于控件,将Bootstrap用于简化样式,将Mustache用于javascript模板。执行为了运行服务器,我使用了Flask ( Python中的微框架)。 它的使用仅限于运行服务器并调用index.html模板,其余请求使用jQuery ...

    hibuddy-springboot2-webservice:根据外国朋友的兴趣来匹配他们的服务

    前端:Bootstrap,Javascript,JQuery,Mustache(服务器模板引擎) 生成工具:gradle 4.2 部署:AWS-EC2,RDS /当与Travis CI&CodeDeploy一起推送时自动构建-发布/使用nginx的无中断部署 IDE:IntelliJ

    深入浅出ES6 简体中文

    部分借鉴Mustache、Nunjucks的模板字符串。 当然,新的语言体系也在之前的基础上查漏补缺:弥补块级作用域变量缺失的let和const关键字;弥补面向大型项目缺失的模块方案;标准委员会甚至为JavaScript增加了类特性,...

    frameworkless-spa:无框架单页应用程序样板

    注意:这不是Javascript驱动的框架或模板系统,请阅读以下文章以了解其工作原理。 。 技术领域 通天塔:转播我们的ES6-7 cssnano:不必担心前缀和css代码性能 eslint:对我们的代码使用linting实用程序 表达:使...

Global site tag (gtag.js) - Google Analytics