一、前言
templater.js 一款 JavaScript 模板引擎,简单,好用。用户可以写一个模板区块,每次根据传入的数据,生成对应数据产生的HTML片段,渲染不同的效果。用于代替拼接字符串这样繁琐且不易于代码维护的方法。
二、使用方法
第一步:
引入插件
<head> <script src="js/jquery-htmler-1.0.js"></script> </head>
第二步:
初始化插件
var temp = new templater();
第三步:
编写模板
<script type="text/template" id="temp"> <div class="list"> <div class="headbox"><img src="{images/head1.jpg}[img]"></div> <ul class="info"> <li>{小明}[name]</li> <li>{1.75}[height]cm</li> <li>{65}[weight]kg</li> <li>爱好{游泳}[hobby,无]</li> </ul> </div> </script>
解释:模板块放在 <script> 中,设置type属性为text/template或text/html,用id标识。用“{ }”包含预览模式下需要显示的内容,以及标识简易模式下数据显示的位置;用“[ ]”包含标准模式下的键,并标识该模式下数据显示的位置,在“,”后面写上找不到数据的时候用于替换的内容。三种模式详见后文。
如果你希望自定义分隔符“{ }”和“[ ]”,可以在初始化插件时带入参数:
var temp = new templater(["{{","}}"],["(",")"]);
上述代码将默认的“{ }”修改为“{{ }}”,将默认的“[ ]”修改为“( )”。
第四步:
渲染模板
方法:templater.getTemp(id,param) //第一个参数传入模板id,第二个参数传入需要显示的数据
根据传参的方式将分别启用三种不同模式,适应三种场景。
1、预览模式:
var html = temp.getTemp('temp')
解释:方法不带第二个参数将启用预览模式。以“第三步”的模板示例为例,该模式下,方法将返回如下HTML片段:
<div class="list"> <div class="headbox"><img src="images/head1.jpg"></div> <ul class="info"> <li>小明</li> <li>1.75cm</li> <li>65kg</li> <li>爱好游泳</li> </ul> </div>
返回的HTML片段将按模板中“{}”中的内容显示。
应用场景:编写或修改HTML模板的结构和样式的时候实现快速预览。
2、简易模式:
var data = ['images/head2.jpg','小红','165','48','画画']; var html = temp.getTemp('temp', data);
解释:第二个参数传入一个数组将启用简易模式。以“第三步”的示例模板为例,该模式下,方法将返回如下HTML片段:
<div class="list"> <div class="headbox"><img src="images/head2.jpg"></div> <ul class="info"> <li>小红</li> <li>1.65cm</li> <li>48kg</li> <li>爱好画画</li> </ul> </div>
返回HTML内容将根据模板“{}”的位置将数组里的数据依次替换进去。
应用场景:模板简单,需要传入数据比较少的情况,实现快速渲染模板。
3、标准模式:
var data = { img: 'images/head3.jpg', name: '王强', height: '172', weight: '68', hobby: '武术' }; var html = temp.getTemp('temp',data);
解释:第二个参数传入一个对象将启用标准模式。以“第三步”的示例模板为例,该模式下,方法将返回如下HTML片段:
<div class="list"> <div class="headbox"><img src="images/head3.jpg"></div> <ul class="info"> <li>王强</li> <li>1.72cm</li> <li>68kg</li> <li>爱好武术</li> </ul> </div>
返回HTML片段将把模板“[ ]”里的内容作为键,并显示为data中对应的值。若找不到对应的值将显示为“[ ]”内的“,”后面的内容,若没有写 “,”将显示为空字符串。
应用场景:模板复杂,需要传入数据比较多的情况,实现准确渲染模板,便于代码维护。
点击此处下载插件
下载包里包含了插件、说明文档及demo。
更多推荐
发布一款原创JavaScript模板引擎插件(将html模板快速渲染成数据对应的HTML片段的工具)
发布评论