mustache模板技术(转)

项目首页: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更加轻量级更加容易使用,经过拓展目前支持javascriptJava,.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>
时间: 2024-10-07 16:30:17

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

MVC下的客户端模板技术

1.引言 在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息.例如:在一个商品列表,我们点击某一样的商品,查看该商品的信息信息.这时通过指定的ID来获取商品详细信息后,我们很多时候都是讲HTML和JavaScript结合起来.通过构造HTML标签和JS的填充来展示相关的界面.这样大量的标签拼接,一来不容易维护,二来也导致在编码过程中容易出现错误.今天我给大家做一下客户端模板技术的简单介绍.希望可以通过这个技术在一定

JS之模板技术(aui / artTemplate)

artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTemplate的下载链接: https://github.com/aui/artTemplate 因为artTemplate比较简单,容易上手,项目的例子,文档又比较齐全,大家有需要可以直接参考官方文档,例子进行深入了解, 我这里就这是用简单常用的,用于快速上手的一个例子吧! 先说明,我是下载artT

前端模板技术面面观(1)

此文已由作者郑海波授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验 此文的写作耗时很长,称之为雄文不为过,小心慢用 此文缘由 其实从发布regularjs之后,我发现在google搜索regularjs 不是给我这个画面 就是给我这个画面 突然发现取名字真是个大学问,当时就基本预计到了会有不明真相的朋友认为它只是一个照搬angularjs的家伙,对于这点,有兴趣的朋友可以看下[为什么要造Regularjs这个轮子]. 而在这个文章,我不会直截了当去与angular做直接的对

mustache模板

古人学问无遗力,少壮工夫老始成.纸上得来终觉浅,绝知此事要躬行. 一.简单示例 代码: 1 function show(t) { 2 $("#content").html(t); 3 } 4 5 var view = { 6 title: 'YZF', 7 cacl: function () { 8 return 6 + 4; 9 } 10 }; 11 $("#content").html(Mustache.render("{{title}} spends

velocity模板技术生成word文档

本文介绍采用velocity技术在Java中生成word文档的方法. 1.新建一个word文档,编辑内容如下: 2.将上述word文档另存为htm格式的文件 3.新建一个Java Project项目velocityTest,加入Velocity所依赖的Jar包velocity-dep-1.5-beta2.jar. 4.在src目录下新建一个velocity.vm文件,将第二步生成的velocity.htm用文本编辑器打开,复制内容到velocity.vm中.内容如下: <html xmlns:v

DataUml Design 教程5-代码模板介绍(甚于T4模板技术)

DataUml Design 代码模板完全基于C#语言来编写的.不懂写模板的可以请教作者,随时欢迎.下面是一段模板代码,这段代码可以获取一个类结构的所有信息. <#@ template language="C#" HostSpecific="True" #> <# NetUmlTemplateCodeHost host = (NetUmlTemplateCodeHost)(Host); #> 命名空间:<#= host.ClassPro

合并_08smarty模板技术(3days)

2013-12-9 昨天内容回顾 两个常用方法assign()和display() assign方法给模板传递变量信息(实际是把信息给到smarty对象属性里边) append方法给模板传递变量信息,和assign的区别是以数组形式传递给模板,可以使用名字一样的变量信息 display()方法展示模板, 后缀.html. 一般实际在使用的时候,模板的后缀习惯是 .tpl,这样别人就不会直接过来访问. 模板中3种变量使用 assign给模板传递的变量使用 系统保留变量 get post sessi

JAVA模板技术

一.起源与现状: 关于Template和JSP的起源还要追述到Web开发的远古年代,那个时候的人们用CGI来开发web应用,在一个CGI程序中写HTML标签. 在这之后世界开始朝不同的方向发展:sun公司提供了类似于CGI的servlet解决方案,但是无论是CGI还是servlet都面对同一个问题:在程序里写html标签,无论如何都不是一个明智的解决方案.于是sun公司于1999年推出了JSP技术.而在另一个世界里,以PHP和ASP为代表的scriptlet页面脚本技术开始广泛应用. 不过即便如

[DikeJS]关于js模板技术,使用requireJS定义模块(四)

前几次对模板技术进行了分析和编写,发现不是很合理,现在发上新的改良代码: /**  * @Author Dike.Li  * @Date 2015/7/30  * @class Template  * @public  * @Description Template Label Replace  */ define(function (require) {     /**      * 提取模板中 XXX='{XXX}' || XXX="{XXX}"      * @type {Reg