前言:

  在分析 jeesite 项目的时候,看到了 Mustache,于是查了下

正文:

1、Mustache 概述

  Mustache 是基于 JavaScript 实现的模板引擎,即用来 渲染前台页面,轻量级,语法简单易用

2、Mustache 使用方法

  1) 网上下载 Mustache.js 和 jquery.js (Git hub 上获取),在页面中引入

  2) 简单的对象绑定展示  

    代码展示:

<script>
$(function(){
var user = {name:"panie",age:25,sex:"girl"};
var template = "My name is {{name}},I'm {{age}},Sex is {{sex}} ";
var view = Mustache.render(template,user);
$("#userinfo").html(view);
});
</script>

    页面呈现效果:

    语法解释:

   i.              Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}”;

   ii.              大括号内的字段名称要和Mustache.render方法中的第二个参数中的对象的属性名一致

   iii.              主要的渲染方法为Mustache.render,该方法有两个参数,第一个为要渲染的模版,也就是上例中的template,第二个就是数据源也就是上例中的user对象

参考链接:http://blog.csdn.net/xuemoyao/article/details/17896203

Mustache 使用总结的更多相关文章

  1. 微信小程序技术分析:Mustache语法要点总结

    小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...

  2. Javascript模板引擎mustache.js详解

    mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...

  3. Mustache 使用心得总结

    Mustache 使用心得总结 前言: 之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总结一下,刚好上周项目里又用到这个轻量型的渲染模版,真心感觉很好用,因此就总结一下使用心得, ...

  4. mustache模板渲染的基本原理

    mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉. ...

  5. Mustache.js前端模板引擎源码解读

    mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...

  6. mustache.js

    mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...

  7. mustache.js渲染带事件的模板

    http://zccst.iteye.com/blog/2183111 最近遇到这样一个问题,预览内容可点击,问题是通过$.Mustache.render("templateId" ...

  8. Mustache.js使用笔记(内容属于转载总结)

    1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}” Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版, 也就是例 ...

  9. mustache模板技术

    一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...

随机推荐

  1. Unity4.3 bug GetChild顺序错乱

    历史原因,目前有个项目还在使用unity4.3版本,比较过不同Unity版本,发现unity4.3的 transform.GetChild 获取的child顺序并不是想要的. 测试代码 using U ...

  2. IT菜鸟的第2天(输入输出,数据类型,运算符的使用)

    1:输入输出 另一种读写方法: 注释:Console.Write(Line{自动换行})是输入,string xxx = Console.ReadLine();是输出. string :字符串类型   ...

  3. DOM操作基础

    ownerDocument 返回元素的 ownerDocumentoffsetParent 获取父节点(找有定位的父节点,没有定位默认是body,ie7以下定位在自己是html)parentNode ...

  4. php中的ip2long和long2ip的理解

    IPv4地址是如何表示的 IPv4使用无符号32位地址,因此最多有2的32次方减1(4294967295)个地址.一般的书写法为用4个小数点分开的十进制数,记为:A.B.C.D,比如:157.23.5 ...

  5. jquery 添加节点的几种方法介绍

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  6. 错题724-java

    1.代码片段: byte b1=1,b2=2,b3,b6; final byte b4=4,b5=6; b6=b4+b5; b3=(b1+b2); System.out.println(b3+b6); ...

  7. git 找回丢失的commit

    From : http://dmouse.iteye.com/blog/1797267 git 的错误操作,导致丢失了重要的commit,真是痛不欲生: 最后通过git神器终于找回了丢失的commit ...

  8. 数据库 Linux下的MySQL数据库管理

    数据库就是数据的集合. 关系数据库是一种特殊的数据库,他将数据组织城标,并表示为表之间的关系. 数据库系统往往是大型项目的核心数据内容,如银行的用户账户信息,腾讯QQ的用户账户信息.股市的各种交易信息 ...

  9. 使用perl实现scp批量分发

    perl模块Net::SCP::Expect批量下发文件 用Net::SSH::Perl和Net::SCP::Expect写部署脚本 scp分发文件的perl脚本 Perl SCP操作 #!/usr/ ...

  10. java:如何用代码控制H2 Database启动

    1.纯手动start/stop package com.cnblogs.yjmyzz.h2; import java.sql.Connection; import java.sql.DriverMan ...