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>

以上~

  • 3
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值