用模板引擎Art-Template渲染空格或换行符引发的一场“命案”

一、绪论

说实话，真的不知道如何给这篇博客命名，因为我觉得应该有一些小伙伴遇到跟我同样的问题正在抓耳挠腮中。

二、导火索

最近在做一个移动H5翻页的功能，类似于MAKA模板那种。假设大致框架如下

第一页是首页，第二页开始就是要动态添加的地方，所以红框里面的样式类，是从2开始的，这是第一个伏笔。

初始代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命案</title>
</head>
<body>
	<div class="sec_1">
		<p>首页</p>
	</div>
	<div class="sec_2">
		<p>张三</p>
		<p>性别：男；联系方式：123；地址：广州；</p>
	</div>
	<div class="sec_3">
		<p>李四</p>
		<p>性别：女；联系方式：321；地址：深圳；</p>
	</div>
	<div class="sec_4">
		<p>王五</p>
		<p>性别：男；联系方式：213；地址：佛山；</p>
	</div>
</body>
</html>

这个看起来用Art_Template模板引擎很容易就能实现。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命案</title>
	<script type="text/javascript" src="template-web.js"></script>
</head>
<body id="content-area">
	
</body>
<script id="tem" type="text/html">
	<div class="sec_1">
		<p>首页</p>
	</div>
	{{each page value index}}
	<div class="sec_{{index+2}}">
		<p>{{value["name"]}}</p>
		<p>性别：{{value["sex"]}}；联系方式：{{value["tel"]}}；地址：{{value["address"]}}；</p>
	</div>
	{{/each}}
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	var data={
		page:[{
			name:"张三",
			sex:"男",
			tel:"123",
			address:"广州"
		},{
			name:"李四",
			sex:"女",
			tel:"321",
			address:"深圳"
		},{
			name:"王五",
			sex:"男",
			tel:"213",
			address:"佛山"
		}]
	}
	var html = template('tem', data);
	$('#content-area').html(html);
</script>
</html>

用模板引擎渲染效果一模一样。

当我兴高采烈地把这段代码交给后台开发A的时候，A说，出于种种原因你把数据格式改成下面这样吧，我才比较好处理接下来的工作。

var data={
		page:[["张三","男","123","广州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
	}

好吧，反正原理都一样，修改之后代码如下

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命案</title>
	<script type="text/javascript" src="template-web.js"></script>
</head>
<body id="content-area">
	
</body>
<script id="tem" type="text/html">
	<div class="sec_1">
		<p>首页</p>
	</div>
	{{each page value index}}
	<div class="sec_{{index+2}}">
		<p>{{value[0]}}</p>
		<p>性别：{{value[1]}}；联系方式：{{value[2]}}；地址：{{value[3]}}；</p>
	</div>
	{{/each}}
</script>
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
	var data={
		page:[["张三","男","123","广州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
	}
	var html = template('tem', data);
	$('#content-area').html(html);
</script>
</html>

问题来了，现在的需求是，假如地址太长了，需要换行。这还不简单，在需要换行的地方加入<br/>不就行了嘛。

var data={
		page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
	}

但是最后发现还是我太天真了，无论是<br/>还是\n甚至是&在模板引擎渲染出来之后都是类似这样的

压根就是当做字符串了，而且暂时来说我还找不到方法可以解决这个问题，“命案”由此发生。

三、探寻之路

用新的模板引擎Handlebars来解决。上面所示的案例，表达式中的任何html代码将会被自动忽略，但是有时候我们需要解析html标签，那么就要用三个花括号{{{ }}}来解决这个问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命案</title>
	<script type="text/javascript" src="handlebars.js"></script>
</head>
<body id="content-area">
</body>
<script id="address-template" type="text/x-handlebars-template">  
	<div class="sec_1">
		<p>首页</p>
	</div>
	{{#each page}}
	<div class="sec_{{@index+2}}">
		<p>{{@key[0]}}</p>
		<p>性别：{{@key[1]}}；联系方式：{{@key[2]}}；地址：{{{@key[3]}}}；</p>
	</div>
	{{/each}}
</script>  

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {  
  // 抓取模板数据  
  var theTemplateScript = $("#address-template").html();  
  // 编译模板  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  // 定义数据  
  var data={
		page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
	}
  // 把数据传送到模板  
  var theCompiledHtml = theTemplate(data);  
  // 更新到模板  
  $('#content-area').html(theCompiledHtml);  
});  
</script>

刚运行就出错了。因为这个模板刚上手，所以其实在官网里面，我找不到有在{{}}符号里面进行运算的写法

最后发现有Helper这个东西，其实就是类似写一个过滤器，你想把数据过滤成什么样子都可以通过编辑这个Helper

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>命案</title>
	<script type="text/javascript" src="handlebars.js"></script>
</head>
<body id="content-area">
</body>
<script id="address-template" type="text/x-handlebars-template">  
	<div class="sec_1">
		<p>首页</p>
	</div>
	{{#each page}}
	<div class="sec_{{formatnumber @index}}">
		<p>{{@key[0]}}</p>
		<p>性别：{{@key[1]}}；联系方式：{{@key[2]}}；地址：{{@key[3]}}；</p>
	</div>
	{{/each}}
</script>  

<script type="text/javascript" src="jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {  
  // 抓取模板数据  
  var theTemplateScript = $("#address-template").html();  
  Handlebars.registerHelper('formatnumber', function(num, options){
      num = num + 2;
      return num;
 });
  // 编译模板  
  var theTemplate = Handlebars.compile(theTemplateScript);  
  // 定义数据  
  var data={
		page:[["张三","男","123","广<br/>州"],["李四","女","321","深圳"],["王五","男","213","佛山"]]
	}
  // 把数据传送到模板  
  var theCompiledHtml = theTemplate(data);  
  // 更新到模板  
  $('#content-area').html(theCompiledHtml);  
});  
</script>

Helper的位置必须在编译模板之前，否则是无效的！！

使用Helper之后，现在又报其他的错误

居然连数组的写法都不支持，但是获取属性的写法却可以，比如@key["name"]。不得不吐槽这个模板引擎用起来真不方便。

但是最后还是找到解决的思路

<script id="address-template" type="text/x-handlebars-template">  
	<div class="sec_1">
		<p>首页</p>
	</div>
	{{#each page}}
	<div class="sec_{{formatnumber @index}}">
		<p>{{#with @key}}{{0}}{{/with}}</p>
		<p>性别：{{#with @key}}{{1}}{{/with}}；联系方式：{{#with @key}}{{2}}{{/with}}；地址：{{#with @key}}{{{3}}}{{/with}}；</p>
	</div>
	{{/each}}
</script>

很遗憾，用@key虽然没有出错了，但是却渲染不出来。

其实已经离成功很接近了，把@key改成this就可以了

<script id="address-template" type="text/x-handlebars-template">  
	<div class="sec_1">
		<p>首页</p>
	</div>
	{{#each page}}
	<div class="sec_{{formatnumber @index}}">
		<p>{{#with this}}{{0}}{{/with}}</p>
		<p>性别：{{#with this}}{{1}}{{/with}}；联系方式：{{#with this}}{{2}}{{/with}}；地址：{{#with this}}{{{3}}}{{/with}}；</p>
	</div>
	{{/each}}
</script>

曩昔方

发布了32 篇原创文章 · 获赞 22 · 访问量 4万+

私信关注

用模板引擎Art-Template渲染空格或换行符引发的一场“命案”

猜你喜欢