本文主要是介绍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,[1,d,3]) //渲染出1,d,3 -
//或 -
var r = Mustache.render(template,1) //渲染出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:18,job:'The Front End'}, -
{name:'wangxiaosan',age:19,job:'java'}, -
{name:'lixiaosi',age:20,job:'The Front End'}, -
{name:'sunxiaowu',age:21,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:18,job:'The Front End'}, -
{name:'wangxiaosan',age:19,job:'java'}, -
{name:'lixiaosi',age:20,job:'The Front End'}, -
{name:'sunxiaowu',age:21,job:'java'} -
] -
} -
//加载模板方法 -
function loadTemplateMustache(mustacheName,targetId,templateId,data){ -
//模板路径 -
var mustacheDir = './mustache/'+mustacheName+'.mustache'; -
//渲染目标容器 -
var targetContainer = $(targetId); -
if(targetContainer.length > 0){ -
$.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>
这篇关于js模板引擎mustache介绍及实例的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
