art-template使用步骤

art-template学习1：

---

art-template 使用步骤：

1. 导入template
2. 定义数据
3. 设置需要需要渲染的div
4. 定义模版
5. 调用template函数
6. 渲染html结构

---

template提供了{{}}语法格式，{{}}称为标准语法
在{{}}内进行变量输出，或循环数组等操作

1.导入template和jquery

// 1.导入模版引擎
<script src="./lib/template-web.js"></script>
<script src="./lib/jquery.js"></script>

2.定义数据，在script里

//2.定义渲染的数据
 var data={name:'zs',age:20,test:'<h3>测试原文输出</h3>',flag1:0,flag2:1,hobby:['eat','sleep','write the code'],regTime:new Date()}
       

3.设置需要需要渲染html在div

// id=contaner
 <div id="container"></div>

4.定义模版，在script

<!--3.1 模版的html结构 ，必须定义到script中-->
    <script type="text/html" id="tp1-user">
        <h1>{{name}}---{{age}}</h1>
        {{@ test}}
        <div>
            {{if flag1===0}}
            flag1的值是0
            {{/if}}
            <br>
            {{if flag2===0}}
            flag1的值是0
            {{else id flag2===1}}
            flag1的值1
            {{/if}}
        </div>
        <ul>
           {{each hobby}}
           <li>循环索引{{$index}}:{{$value}}</li>
            {{/each}}
        </ul>

        <h3>{{regTime}}</h3>
        <h3>{{regTime | dateFormat}}</h3>
    </script>

5.调用template函数

在windo全局 ，多一个函数，叫做template(‘模版的id’，需要渲染的数据对象)

//4.调用template函数
        var htmlStr=template('tp1-user',data)

5.渲染html结构

//5.渲染html结构
        $('#container').html(htmlStr)