前言:

  在分析 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. 第10章 同步设备I/O和异步设备I/O(2)_同步IO和异步IO基础

    10.3 执行同步设备I/O (1)对设备读写操作的函数 ①ReadFile/WriteFile函数 参数 描述 hFile 文件句柄 pvBuffer 指向要接收文件数据的缓冲区或把缓冲区数据写入设 ...

  2. 第15章 设备无关位图_15.1 DIB文件格式

    15.1 DIB文件格式(一种文件格式,扩展名为BMP) 15.1.1 OS/2风格的DIB 文件格式 字段 说明 文件头 (BITMAPFILEHEADER) 1.共14个字节 2.缩写建议用bmf ...

  3. AC日记——忽略大小写的字符串比较 openjudge 1.7 16

    16:忽略大小写的字符串比较 总时间限制:  1000ms 内存限制:  65536kB 描述 一般我们用strcmp可比较两个字符串的大小,比较方法为对两个字符串从前往后逐个字符相比较(按ASCII ...

  4. HTML:图片热点 网页划区 表单

    图片热点: 划出图片中的区域,做超链接,点击该区域就可以直接跳转到链接网站 <img src="../../../3.jpg" title="血精灵" u ...

  5. u3d_shader_surface_shader_3

    参考http://my.oschina.net/u/138823/blog/181131 加了个凹凸贴图: 抱歉把女神苏菲做成这样. 一:Normal Texture的制作: 1.首先是Normal ...

  6. JMeter学习(四)参数化

    JMeter也有像LR中的参数化,本篇就来介绍下JMeter的参数化如何去实现. 参数化:录制脚本中有登录操作,需要输入用户名和密码,假如系统不允许相同的用户名和密码同时登录,或者想更好的模拟多个用户 ...

  7. 向tiny6410移植tslib(tslib-1.4)

    环境:RedHat 已安装交叉编译器 tslib版本:1.4 首先在redhat文件系统的/usr/local/tslib 创建目录 拷贝源代码tslib-1.4.tar.gz到/usr/local/ ...

  8. uwsgi+flask环境中安装matplotlib

    uwsgi+flask的python有自身的virtual environment,可以通过如下命令进入 . venv/bin/activate 虽然通过sudo apt-get install py ...

  9. Nginx中防盗链(下载防盗链和图片防盗链)操作记录

    日常运维工作中,设置防盗链的需求会经常碰到,这也是优化网站的一个必要措施.今天在此介绍Nginx中设置下载防盗链和图片防盗链的操作~ 一.Nginx中下载防盗链的操作记录对于一些站点上的下载操作,有很 ...

  10. (转)无法打开C盘,提示"本次操作由于这台计算机的限制被取消,请与你的管理员联系”

    今天下了一个网吧用的工具一不小心把系统给限制了好多双击打开C的时候就出现本次操作由于这台计算机的限制被取消,请与你的管理员联系下载一个精锐网吧辅助工具解除了一下现在但是还是不能双击 于是就在网上找帮啊 ...