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更加轻量级更加容易使用,经过拓展目前支持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}}也是会显示出来的
- "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>
- <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>
mustache模板技术(转)的更多相关文章
- mustache模板技术
一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- JS之模板技术(aui / artTemplate)
artTemplate是个好东西啊,一个开源的js前端模板引擎,使用简单,渲染效率特别的高. 我经常使用这个技术来在前端动态生成新闻列表,排行榜,历史记录等需要在前端列表显示的信息. 下面是artTe ...
- MVC下的客户端模板技术
1.引言 在Web编程中,我们有时经常需要使用Ajax来访问服务端的接口,然后使用这些返回的数据(一般格式都是JSON)来展示客户端的相关信息.例如:在一个商品列表,我们点击某一样的商品,查看该商品的 ...
- 再谈前端HTML模板技术
在web2.0之前,写jsp的时候虽然有es和JSTL,但是还是坚持jsp.后面在外包公司为了快速交货,还是用了php Smart技术. web2.0后,前端模板技术风行. 代表有如下三大类: Str ...
- Smarty模板技术学习
模板引擎技术:使得php代码和html代码分离的技术就称为"模板引擎技术" 自定义smarty模板技术实现 <?php //迷你smarty原理 class MiniSmar ...
- smarty模板技术
一.什么是smarty?smarty是一个使用php写出来的模板php模板引擎,它提供了逻辑与外在内容的分离,简单的讲,目的就是要使用php程序员同美工分离,使用的程序员改变程序的逻辑内容不会影响到美 ...
- trait与policy模板技术
trait与policy模板技术 我们知道,类有属性(即数据)和操作两个方面.同样模板也有自己的属性(特别是模板参数类型的一些具体特征,即trait)和算法策略(policy,即模板内部的操作逻辑). ...
- 快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC、EntityFrameWork、T4模板技术。
快速开发框架,及库存管理系统,基于easyui框架和C#语言MVC.EntityFrameWork.T4模板技术. 产品界面如下图所示: 源码结构: 开放全部源码,如有需要请联系,QQ:1107141 ...
随机推荐
- Python实时语音识别控制
代码地址如下:http://www.demodashi.com/demo/12946.html Python实时语音识别控制 概述 本文中的语音识别功能采用 百度语音识别库 ,首先利用 PyAudio ...
- SqlServer+Topshelf+Quartznet做集群,定时任务分布式处理
接触Quartznet之前,老东家用的是总监自己写的分布式任务框架,好用但是配置麻烦,unity,一个微软容器,配置节点错一个,整个使用到unity文件的项目全部跑不起来,这后果真的受不了... 目前 ...
- Spring boot centos部署启动停止脚本
原文地址:http://www.cnblogs.com/skyblog/p/7243979.html 使用脚本启动和关闭服务,centos下的脚本启动和关闭可以如下: start(){ now=`da ...
- 用Darwin开发RTSP级联server(拉模式转发)(附源代码)
源代码下载地址:https://github.com/EasyDarwin orwww.easydarwin.org 在博客 在Darwin进行实时视频转发的两种模式 中,我们描写叙述了流媒体serv ...
- Atitit.播放系统规划新版本 and 最近版本回顾 v3 pbf.doc
Atitit.播放系统规划新版本 and 最近版本回顾 v3 pbf.doc 1 版本11 (ing)4 1.1 规划h5本地缓存系列 4 1.2 Android版本app4 1.3 双类别系统, ...
- Virtex6 PCIe 超简版基础概念学习(一)
文档版本 开发工具 测试平台 工程名字 日期 作者 备注 V1.0 ise14.7 DBF板 Day2/PCIETest1 2016.03.31 lutianfei none 参考资料: Sparta ...
- Gradle build.gradle to Maven pom.xml ,终于找到你了。
尊重原创:https://blog.csdn.net/kevin_luan/article/details/50996109 根据build.gradle 生成maven pox.xml 1.将以下配 ...
- java中ThreadLocalRandom类和Random类的使用
package frank; import java.lang.*; import java.util.*;//工具类一般都在util里面 import java.util.concurrent.Th ...
- pthread_create11121
#include <stdlib.h> #include <stdio.h> #include <pthread.h> void* test(void* args) ...
- Android 升级ADT到22第三方Jar包导致的ClassNotFoundException和NoClassDefFoundError异常解决
在使用异步载入框架Android-Universal-Image-Loader的Jar包的时候遇到错误: java.lang.NoClassDefFoundError:com.nostra13.uni ...