前言:

  在分析 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. jdbc与 Beanshell PostProcessor 对多条结果的处理

    配置了数据库后,可以通过Beanshell对结果进行特别的操作,一下为对多条数据的处理 数据库的配置如图:

  2. [转]ASP.NET MVC3 + EF 性能优化解决方案以及最优架构

    [集思广议]      我们用 asp.net mvc3 + ef 做了一个网站,现在是内测阶段,发现打开速度非常慢.首页打开(无缓存)都在5-6s以上(测试环境:程序和db都在本机),请问各位 mv ...

  3. bzoj1082[SCOI2005]栅栏

    Description 农夫约翰打算建立一个栅栏将他的牧场给围起来,因此他需要一些特定规格的木材.于是农夫约翰到木材店购 买木材.可是木材店老板说他这里只剩下少部分大规格的木板了.不过约翰可以购买这些 ...

  4. JavaScript Math 对象

    JavaScript Math 对象 Math 对象 Math 对象用于执行数学任务. Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(). 语法 var ...

  5. How to regress out unwanted vectors

    Source: http://stats.stackexchange.com/questions/117840/how-to-regress-out-some-variables Answer in ...

  6. Codevs 1229 数字游戏

    1229 数字游戏  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 白银 Silver     题目描述 Description Lele 最近上课的时候都很无聊,所以他发明了 ...

  7. 简单创建与布署CLR存储过程

    今天的博文是学习CLR存储过程,一个简单的例子,学会怎样创建,编译,布署在SQL中.CLR能做一些T-SQL无法做的事情,很多情况之后,它比T-SQL快. 打开VS2013,创建一个新专案,参考下面5 ...

  8. [转]PHP 下使用 ZeroMQ 和 protobuf

    FROM : http://www.68idc.cn/help/makewebs/php/20150118175432.html 前言 这个记录总的来说分两部分: 搭建环境. 简单使用教程. 搭建环境 ...

  9. codevs1910 递归函数

    难度等级:黄金 codevs1910 递归函数 题目描述 Description 对于一个递归函数w(a, b, c). 如果a <= 0 or b <= 0 or c <= 0就返 ...

  10. 利用Spring的@Async异步处理改善web应用中耗时操作的用户体验

    Web应用中,有时会遇到一些耗时很长的操作(比如:在后台生成100张报表再呈现,或 从ftp下载若干文件,综合处理后再返回给页面下载),用户在网页上点完按钮后,通常会遇到二个问题:页面超时.看不到处理 ...