用模板引擎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甚至是&amp;在模板引擎渲染出来之后都是类似这样的

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

三、探寻之路

用新的模板引擎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>  

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Art-template是一款高性能、轻量级的模板引擎,适用于Node.js和浏览器环境。它以简洁明了的语法,支持模板继承、条件判断、循环遍历等常见功能,同时还提供了强大的过滤器和自定义标签功能。 Art-template的使用逻辑如下: 1. 安装Art-template 可以通过npm安装Art-template,命令如下: ```npm install art-template --save``` 2. 引入Art-template 在Node.js中,可以使用require语句引入Art-template: ```const template = require('art-template');``` 在浏览器中,可以使用script标签引入Art-template: ```<script src="path/to/art-template.js"></script>``` 3. 编写模板 Art-template使用{{}}包裹变量、表达式或语句。例如,以下是一个简单的模板: ``` <!DOCTYPE html> <html> <head> <title>{{title}}</title> </head> <body> <h1>{{title}}</h1> <p>{{content}}</p> </body> </html> ``` 4. 渲染模板 使用template方法可以将模板渲染成字符串。例如: ``` const template = require('art-template'); const data = { title: 'Art-template', content: 'A lightweight and powerful template engine' }; const html = template('path/to/template', data); console.log(html); ``` 在上面的例子中,我们将data对象传递给了模板,使用{{}}包裹的变量会被替换成data对象中的对应值,最终输出渲染后的HTML字符串。 5. 高级用法 除了基本的变量替换,Art-template还支持模板继承、条件判断、循环遍历等高级用法。例如,以下是一个使用if语句和each语句的模板: ``` {{if isAdmin}} <p>Welcome, admin</p> {{else}} <p>Welcome, user</p> {{/if}} <ul> {{each list}} <li>{{$index}}. {{$value}}</li> {{/each}} </ul> ``` 以上就是Art-template的使用逻辑,希望能对你有所帮助。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值