Mustache 使用总结
前言:
在分析 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 使用总结的更多相关文章
- 微信小程序技术分析:Mustache语法要点总结
小程序开发的wxml里,用到了Mustache语法.所以,非常有必要把Mustache研究下. 什么是Mustache?Mustache是一个logic-less(轻逻辑)模板解析引擎,它是为了使用户 ...
- Javascript模板引擎mustache.js详解
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- Mustache 使用心得总结
Mustache 使用心得总结 前言: 之前的一个项目里面就有用到这个前台的渲染模版,当时挺忙的也没时间抽空总结一下,刚好上周项目里又用到这个轻量型的渲染模版,真心感觉很好用,因此就总结一下使用心得, ...
- mustache模板渲染的基本原理
mustache.js是一个模板引擎,为开发节省了大量的“人力”,对于初学者,我是从这篇 和这篇 博客接触的,算是对mustache有了初步认识,不得不承认自己还是菜鸟阶段还有太多东西要学,慢慢熟悉. ...
- Mustache.js前端模板引擎源码解读
mustache是一个很轻的前端模板引擎,因为之前接手的项目用了这个模板引擎,自己就也继续用了一会觉得还不错,最近项目相对没那么忙,于是就抽了点时间看了一下这个的源码.源码很少,也就只有六百多行,所以 ...
- mustache.js
mustache.js 是一个 Mustache 模板系统的 JavaScript 实现. Mustache 模板语法的逻辑比较简单.它用于HTML,配置文件,源代码等.它的工作方式是通过通过以哈希值 ...
- mustache.js渲染带事件的模板
http://zccst.iteye.com/blog/2183111 最近遇到这样一个问题,预览内容可点击,问题是通过$.Mustache.render("templateId" ...
- Mustache.js使用笔记(内容属于转载总结)
1.Mustache的语法很简单,用两个大括号标记要绑定的字段即可,“{{}}” Mustache主要的渲染方法为Mustache.render(),该方法有两个参数,第一个为要渲染的模版, 也就是例 ...
- mustache模板技术
一.简介Web 模板引擎是为了使用户界面与业务数据(内容)分离而产生的,它可以生成特定格式的文档,通常是标准的 HTML 文档.当然不同的开发语言有不同模板引擎,如 Javascript 下的 Hog ...
随机推荐
- POJ1062昂贵的聘礼[最短路建模]
昂贵的聘礼 Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 45892 Accepted: 13614 Descripti ...
- jsp考试的错题
(选择一项) A: B: C: D: 正确答案是 A,首先,session的出现确实是为了解决HTTP无法保持客户状态的特点:因此A选项正确:用户信息也是客户状态的一部分,所以由A可以看出B的说法就不 ...
- android studio 应用小知识总结
1.在复制一个工程文件后 想修改包名,则在Android下的java中的 Android test中,鼠标右键Refactor->rename->Rename_package->Do ...
- Zygote进程【2】——Zygote的分裂
在Zygote的诞生一文中init进程是如何一步步创建Zygote进程的,也了解了Zygote的进程的作用.Zygote进程的诞生对于整个Java世界可以说有着"开天辟地"的作用, ...
- 直接拿来用!最火的Android开源项目(完结篇)
直接拿来用!最火的Android开源项目(完结篇) 2014-01-06 19:59 4785人阅读 评论(1) 收藏 举报 分类: android 高手进阶教程(100) 摘要:截至目前,在GitH ...
- WARN util.NativeCodeLoader: Unable to load native-hadooplibrary for your platform… using builtin-java classes where applicable
方法1glibc 官方要求的2.14版本以上 方法2:http://www.secdoctor.com/html/yyjs/31101.html 方法3: http://dl.bintray.com/ ...
- 关于codeMirror插件使用的一个坑
codeMirror插件可以做语法高亮渲染,但它操作过程是这样的:先从 textarea中读取值放到codemirror动态生成的div中,根据textarea中的换行个数确定行数,根据正则表达来高亮 ...
- django复习笔记1:环境配置
一.IDE 推荐使用sublime安装djaneiro插件. 1.安装方式 package control中搜索djaneiro 支持补全请参考:Django support for Sublime ...
- 源码安装mysql
1. 安装依赖组件 # yum install gcc gcc-c++ ncurses-devel perl -y 2. 安装cmake # wget http://www.cmake.org/f ...
- wireshake抓包,飞秋发送信息,python
http://wenku.baidu.com/link?url=Xze_JY8T15pqI9mBLRpTxWF2d6MP-32xb6UwuE6tsUmitRDheJe-Ju87WlDEDBGuI5MF ...