浅谈模板引擎之artTemplate

来源：互联网发布：cisco mac acl 编辑：程序博客网时间：2024/05/09 11:51

对于前端开发者来说，有一个绑数据的模板是多么的幸福，不用我多说大家也知道，终于不用在js中一个个字符串拼接一大推元素数据啥的，可以省下我们很多时间。来给大家推荐一款模板引擎artTemplate，会推荐这款模板引擎最主要还是他轻量级，代码简洁，好用，一个template.js大概也才几kb左右。

each循环

<script id="test1" type="text/html">    <h3>{{title}}</h3>    <!--each循环例1-->    <ul>        {{each list as value i}}        <li>{{i + 1}} ：{{value}}        {{/each}}    </ul>    <!--each循环例2-->    {{each list}}    <div>{{$index + 1}}: {{$value}}</div>    {{/each}}</script>

**解析：**each循环有两种方法，一种是例1中的{{each list as value i}}，其中list表示要循环遍历的数组，value表示数组中的某个元素，i表示当前的索引；另一种是例2中的 {{each list}}写一个要遍历的数组就够了，而{{index}}表示当前索引，{{value}}表示当前循环的某个元素，这两个变量是固定的名称

if条件判断

<script id="test2" type="text/html">    {{each list}}       {{if ($index + 1)%2 == 1}}          <div>奇数列{{$index + 1}}: {{$value}}</div>       {{else}}          <div>偶数列{{$index + 1}}: {{$value}}</div>       {{/if}}    {{/each}}</script>

**解析：**if判断跟平时普通的判断一样，但是要注意在这里面要有始有终，有{{if}}就得有对应的{{/if}}，有{{each}}就得有对应的{{/each}}

这些模板都是建立在script元素中，但是此时script的type要是type=”text/html”，然后在js脚本中弄数据，代码如下：

<script>    var data = {        title: '六大明星热度排行',        list: ['赵丽颖', '林更新', '刘诗诗', '郑爽', '杨幂', '鹿晗']    };//    绑数据到test1模板中    var html = template('test1', data);//    在html中显示模板test1    document.getElementById('content1').innerHTML = html;    //    绑数据到test2模板中    var html = template('test2', data);    //    在html中显示模板test2    document.getElementById('content2').innerHTML = html;</script>

模板跟js中数据都绑定好了，一定要记得在html中添加元素来绑定模板，全部代码如下：

<!DOCTYPE HTML><html><head>    <meta charset="utf-8">    <title>templateJS模板引擎</title>    <script src="js/template.js"></script></head><body><div id="content1"></div><div id="content2"></div><script id="test1" type="text/html">    <h3>{{title}}</h3>    <!--each循环例1-->    <ul>        {{each list as value i}}        <li>{{i + 1}} ：{{value}}        {{/each}}    </ul>    <!--each循环例2-->    {{each list}}    <div>{{$index + 1}}: {{$value}}</div>    {{/each}}</script><script id="test2" type="text/html">    {{each list}}       {{if ($index + 1)%2 == 1}}          <div>奇数列{{$index + 1}}: {{$value}}</div>       {{else}}          <div>偶数列{{$index + 1}}: {{$value}}</div>       {{/if}}    {{/each}}</script><script>    var data = {        title: '六大明星热度排行',        list: ['赵丽颖', '林更新', '刘诗诗', '郑爽', '杨幂', '鹿晗']    };//    绑数据到test1模板中    var html = template('test1', data);//    在html中显示模板test1    document.getElementById('content1').innerHTML = html;    //    绑数据到test2模板中    var html = template('test2', data);    //    在html中显示模板test2    document.getElementById('content2').innerHTML = html;</script></div></body><html>

阅读全文

0 0