浅谈模板引擎之artTemplate

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

each循环

<script id="test1" type="text/html">
    

{{title}}</h3>
    {{each list as value i}}
  • {{i + 1}}{{value}} {{/each}} </ul> {{each list}}
    {{$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}}
          
奇数列{{$index + 1}}: {{$value}}</div> {{else}}
偶数列{{$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中添加元素来绑定模板,全部代码如下:


<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">
    

{{title}}</h3>
    {{each list as value i}}
  • {{i + 1}}{{value}} {{/each}} </ul> {{each list}}
    {{$index + 1}}: {{$value}}</div> {{/each}} script> <script id="test2" type="text/html"> {{each list}} {{if ($index + 1)%2 == 1}}
    奇数列{{$index + 1}}: {{$value}}</div> {{else}}
    偶数列{{$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>

你可能感兴趣的:(模板引擎)