artTemplate.js--Javascript模板引擎

当我们需要兼容低版本浏览器，比如IE8，但是又想实现动态插入数据的时候，vue.js并不是很好的选择，因为它不兼容IE8，这时候我们需要选择其他方案---artTemplate.js这款Javascript模板引擎是我目前用的比较多的一款模板引擎，话不多说，下面说一下它在项目中的用法：在html页面的body结构中使用一个type="text/html"，id为test（自定义id）的script标签存放模板：

<script id="test" type="text/html">
<h1>{{title}}</h1>
<div>{{content}}</div>
</script>

渲染模板：

var data = {
    title: '标签',
    content: '内容'
};
var html = template('test', data);//第一个参数是字符串形式，传入模板的id，第二个参数是需要插入的数据对象。
document.getElementById('content').innerHTML = html;//将模板插入页面位置

上面说的是一种极其简单的情况，但是当我们项目中的数据稍有复杂，比如说有数组格式的数据需要循环遍历插入页面中，或者说后台返回的数据有真假值需要我们判断之后再进行插入等等，上述的写法可能满足不了我们项目的需求，那么就要加入一些判断，遍历等写法，如下：

<script id="test" type="text/html">
<h1>{{title}}</h1>
<ul>
    {{each list as value i}}//这里的list是数据中需要遍历的数组名称
        <li>索引 {{i + 1}} ：{{value}}</li>//value是数组中每项的值，i是索引，也可以命名为index或者其他，你喜欢就好
    {{/each}}
</ul>
{{if status}}
     <div class="red">{{status}}</div>
{{/if}}//这里的含义：如果status是真值（存在）的话，则显示这段话
</script>

还有一点是：改模板支持include语句

<script id="test" type="text/html">
{{if code>0}}
     {{include 'template_name'}}
{{/if}}//这里的含义：如果code>0成立，返回真值的话，则用include语句嵌入子模板
</script>

上面三种形式用的比较多，如有其他需要，请查看详细文档：http://www.jq22.com/jquery-info1097

huandie2012 / blog

artTemplate.js--Javascript模板引擎 #21