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 ...
随机推荐
- Unity 实现物体破碎效果(转)
感谢网友分享,原文地址(How to Make an Object Shatter Into Smaller Fragments in Unity),中文翻译地址(Unity实现物体破碎效果) In ...
- 怎样使用VMware Workstation(虚拟机)
怎样使用VMware Workstation(虚拟机) 听语音 浏览:66981 | 更新:2010-12-06 16:26 | 标签:vmware 1 2 3 4 5 6 7 分步阅读 一键约师傅 ...
- 几种.NET平台数据持久化框架介绍
原文连接:http://yuxnet.blog.163.com/blog/static/164863495201131532223362/ 在.NET平台下,关于数据持久层框架非常多,本文主要对如下几 ...
- HTML <map> 设置图热点
需要在一张图片中,设置一个区域为热点就用到了<map> 定义一个客户端图像映射.图像映射(image-map)指带有可点击区域的一幅图像. <img src="planet ...
- BZOJ 1014 【JSOI2008】 火星人prefix
Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...
- HTTP下密码的安全传输、OAuth认证
在复杂的web环境下,我们没有百分的把握保证信息在传输的过程中不被接货,那不是用明文如何告诉服务器自己的身份呢? 在一些高度通信安全的网络中,数据传输会使用HTTPS作为传输协议,但是通常情况下我们没 ...
- Cordova - 使用Cordova开发iOS应用实战4(调用摄像头拍照,并编辑)
使用Cordova可以很方便的通过js代码来使用设备摄像头拍照,只需把camera插件添加进来即可. 一,添加camera插件 首先我们要在“终端”中进入工程所在的目录,然后运行如下命令: 1 cor ...
- 我在 CSDN 的小窝
以后有文章,我会同时更新 博客园 和 CSDN. CSDN:http://blog.csdn.net/u010918003
- Package Control Installation
simple 用 ctrl+~ 打开 sublime 的控制台,将下面代码复制进去. sublime text2: import urllib2, os, hashlib; h = '2915d185 ...
- SQLite常用点滴总结(转)
expressionexpr ::= expr binary-op expr |expr [NOT] like-op expr [ESCAPE expr] |unary-op expr |( ...