js模板引擎mustache介绍及实例
在Javascript中 mustache.js是实现mustache模板系统。
Mustache是一种没有逻辑的模板语法。它可以应用于HTML、配置文件、源代码等任何地方。 它通过使用散列或对象中提供的值在模板中展开标记来工作。
我们称它为没有逻辑的模板，是因为它没有if语句、else子句和for循环，它只有标签。一些标签被替换为值或什么也没有或者一系列的值。
不能在模板中使用else if做逻辑判断，我们可以在数据传入之前对数据做逻辑操作。
我们在那使用mustache.js
你可以在任何可以使用JavaScript的地方使用mustache.js来渲染mustache模板。包括web浏览器、服务器环境（node）。
语法
- 模板以包裹住内容，格式中写入的是模板的内容。 被替换的内容字段使用双花括号包裹起来"{{}}"
- 插值表达式：双花括号{{}} 包裹替换的字段
- {{#prop-name}}{{/prop-name}}用作for循环渲染，当prop-name的值为非空数组时，mustach不会遍历该数组，渲染出个数和该数组长度相等的DOM元素
- 也可以用作if-else判断。{{#prop-name}}{{/prop-name}}和{{prop-name}}{{/prop-name}}两组标签结合使用，当prop-name的值存在且不为false时，会渲染{{#prop-name}}{{/prop-name}}的内容，否则渲染{{prop-name}}{{/prop-name}}的内容。
<script id="template" type="x-tmpl-mustache">
{{name}}
</script>
<script type="text/javascript">
var template = $("#template").html();
//name值为函数返回值
var r = Mustache.render(template,{
name:function(){
return 'abc' //abc会替换双花括号内name
}
})
//name值为字符串
var r = Mustache.render(template,{name:'wan'}) //字符串wan会替换双花括号内的name
</script>
我们注意到上面代码render的第二个参数都是一个对象，第二个参数我们通常都会使用对象类型，传入一个对象，在模板中书写对象属性，可以渲染出对象的值。 但也可以是其它类型如 数组、字符串类型、数字，如下:
<script id="template" type="x-tmpl-mustache">
{{.}}
</script>
<script type="text/javascript">
function loadUser(){
var template = $("#template").html();
var r = Mustache.render(template,'wan') //渲染出wan
//或
var r = Mustache.render(template,[,d,]) //渲染出1,d,3
//或
var r = Mustache.render(template,) //渲染出1
}
</script>
我们可以看到如果第二个参数是其它类型，那么在模板中双花括号内就用点.来表示，使用起来不方便。 一般在项目中很少会传入其它类型。
对象属性值为数组时 实现forEach遍历数组渲染DOM
//页面部分
<div id="target">Loading</div>
//模板
<script id="template" type="x-tmpl-mustache">
<ul>
{{#list}}
<li>
<span>{{name}}</span>
<span>{{age}}</span>
<span>{{job}}</span>
</li>
{{/list}}
</ul>
</script>
//js部分
<script type="text/javascript">
var template = $("#template").html();
var r = Mustache.render(template,{
list:[
{name:'wannianqing',age:,job:'The Front End'},
{name:'wangxiaosan',age:,job:'java'},
{name:'lixiaosi',age:,job:'The Front End'},
{name:'sunxiaowu',age:,job:'java'}
]
})
$("#target").html(r)
</script>
用作if-else,属性无论是显示还是隐式转换为boolean类型，true时渲染{{#prop-name}} false时渲染{{^prop-name}}
//页面部分
<div id="target">Loading</div>
//模板
<script id="template" type="x-tmpl-mustache">
{{#isShow}}一{{/isShow}}
{{^isShow}}二{{/isShow}}
</script>
//js部分
<script type="text/javascript">
var template = $("#template").html(); var r = Mustache.render(template,{isShow:true}); //isShow存在且为布尔值true时，显示 “一”
var r = Mustache.render(template,{isShow:false}); //isShow存在且为布尔值true时，显示 “二”
var r = Mustache.render(template,{}); //isShow不存在时，显示 “二”
var r = Mustache.render(template,{isShow:[]}); //isShow存在，为空数组时，显示 “二”
var r = Mustache.render(template,{isShow:undefined}); //isShow存在，为undefined时，显示 “二”
var r = Mustache.render(template,{isShow:null}); //isShow存在，为null时，显示 “二” $("#target").html(r)
</script>
实际使用
用一个唯一id的script标签包裹模板内容，type类型为text/template
<script id="template" type="text/template"></script>
使用原生javascript方法或者jquery方法获得唯一id的script标签的html内容
var template = document.getElementById('template').innerHTML.trim();
//或
var template = $("#template").html();
使用mustache的render方法处理模板后填充到目标位置
var rendered = Mustache.render(template,obj);
$('#target').html(rendered)
完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body "loadUser()">
<div id="target">Loading</div> <script id="template" type="x-tmpl-mustache">
Hello {{}}~
<ul>
{{#list}}
<li>{{name}}</li>
{{/list}}
</ul>
</script>
<script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/mustache.js"></script>
<script type="text/javascript">
function loadUser(){
var template = $("#template").html(); var obj = {
list:[
{name:'wan'},
{name:'wan'},
{name:'wan'}
]
}
var rendered = Mustache.render(template,obj);
$('#target').html(rendered)
}
</script>
</body>
</html>
上面示例是内部文件使用mustache模板引擎，我们还可以引入外部模板引擎来渲染页面。
首先我们在HTML文档中引入jquery.mustache.js文件配合mustache使用，jquery.mustache.js是jQuery做了一层封装，提供了集中方法让我们更方便使用mustache做模板渲染。 此处我们使用它的.load方法从指定路径加载模板文件，加载成功后使用$.Mustache.render()处理模板渲染页面。
$.Mustache
.load('./mustache/demo2.mustache')
.done(function(){
$("#target").html($.Mustache.render('demo2',{name:'wan'}))
})
下面我们来看一个完整的案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="target">Loading</div> <script type="text/javascript" src="js/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="js/mustache.js"></script>
<script type="text/javascript" src="js/jquery.mustache.js"></script>
<script type="text/javascript">
//要传入的数据
var objData = {
list:[
{name:'wannianqing',age:,job:'The Front End'},
{name:'wangxiaosan',age:,job:'java'},
{name:'lixiaosi',age:,job:'The Front End'},
{name:'sunxiaowu',age:,job:'java'}
]
}
//加载模板方法
function loadTemplateMustache(mustacheName,targetId,templateId,data){
//模板路径
var mustacheDir = './mustache/'+mustacheName+'.mustache';
//渲染目标容器
var targetContainer = $(targetId);
if(targetContainer.length > ){
$.Mustache
.load(mustacheDir) //加载模板文件
.done(function(){
//渲染模板
renderTarget(targetContainer,templateId,data)
})
}
}
//渲染模板方法
function renderTarget(dom,templateId,data){
var el = dom;
el.html('');
el.append($.Mustache.render(templateId,data));
} loadTemplateMustache('demo4','#target','template',objData)
</script>
</body>
</html>
————————————————
版权声明：本文为CSDN博主「lucky万万」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_30019329/article/details/87895623
js模板引擎mustache介绍及实例的更多相关文章
- JS模板引擎-Mustache模板引擎使用实例1-表格树
1 使用实例代码 1.jsp代码 <!DOCTYPE html> <html lang="zh-CN"> <head> <title> ...
- Js模板引擎mustache
mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后只有9KB,非常值得在项目中使用.本文总结它的使用方法和一些使用心得,内容不算很高深 ...
- 前端JS模板引擎Mustache.js的用法
Mustache.js在前端是一个非常强大的模板 Mustache用法参考
- js模版引擎Mustache介绍
Mustache通常被称为JavaScript模板的基础.另一个流行的解决方案Hanldebars实际上就是基于Mustache构建而成的.这并不意味着Mustache是一个不好的模板解决方案. 下面 ...
- vue系列---Mustache.js模板引擎介绍及源码解析(十)
mustache.js(3.0.0版本) 是一个javascript前端模板引擎.官方文档(https://github.com/janl/mustache.js) 根据官方介绍:Mustache可以 ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- 模板引擎mustache.js
Javascript模板引擎mustache.js详解 阅读目录 1. 从一个简单真实的需求讲起 2. mustache的用法 3. mustache的思想 4. {{prop}}标签 5. {{ ...
- 探究Javascript模板引擎mustache.js使用方法
这篇文章主要为大家介绍了Javascript模板引擎mustache.js使用方法,mustache.js是一个简单强大的Javascript模板引擎,使用它可以简化在js代码中的html编写,压缩后 ...
- 使用新一代js模板引擎NornJ提升React.js开发体验
当前的前端世界中有很多著名的开源javascript模板引擎如Handlebars.Nunjucks.EJS等等,相信很多人对它们都并不陌生. js模板引擎的现状 通常来讲,这些js模板引擎项目都有一 ...
随机推荐
- SP1805 HISTOGRA - Largest Rectangle in a Histogram
--------------------------------------------------- 我就是想学个单调栈然后全网都是个蓝题 ----------------------------- ...
- 处理异常 ‘try’——‘except’ 方法
try: name 2+' [][3] {}['k'] ret = int(input('number>>>')) print(ret*'*') except ValueError: ...
- ISE post-place&route仿真准备
ISE post-place&route仿真准备 使用目的:post-place&route仿真是综合后考虑门延时而进行的仿真.因为考虑到各个门的延时,所以可以发现行为仿真(behav ...
- MyBatis mapper文件中使用常量
MyBatis mapper文件中使用常量 Java 开发中会经常写一些静态常量和静态方法,但是我们在写sql语句的时候会经常用到判断是否等于 //静态类 public class CommonCod ...
- javascript 权威指南1
JavaScript是面向web的编程语言 web(World Wide Web)即全球广域网,也称为万维网,它是一种基于超文本和HTTP的.全球性的.动态交互的.跨平台的分布式图形信息系统.是建立在 ...
- openlayers显示比例尺
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- gulp常用插件之gulp-cache使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-cache这是一款基于临时文件的gulp缓存代理任务. 更多使用文档请点击访问gulp-cache工具官网. 安装 一键安装不多解释 n ...
- 【巨杉数据库SequoiaDB】省级农信国产分布式数据库应用实践
本文转载自<金融电子化> 原文链接:https://mp.weixin.qq.com/s/WGG91Rv9QTBHPsNVPG8Z5g 随着移动互联网的迅猛发展,分布式架构在互联网IT技术 ...
- CF573E Bear and Bowling（6-1）
题意 洛谷 做法一 考虑一种贪心(先别管对不对),设当前已选择的集合为\(A\),这是考虑该集合的补集,每个元素加进来后的增量为\(V_i\),则挑选最大的那个加入该集合 结论1:遵循上述贪心,\(\ ...
- 订阅消息---由于微信小程序取消模板消息，限只能开发订阅消息
订阅消息开发步骤: 1.小程序管理后台添加订阅消息的模板 2.小程序前端编写调用(拉起)订阅授权 wx.requestSubscribeMessage({ tmplIds: ['34fwe1211xx ...