模板引擎

 

模板引擎 : 将数据转化成html格式的字符串
1.准备数据
2. 下载, 导入js文件
3.创建模板 在html页面中创建

 <script type="text/template"></script>

4.把数据使用在模板中 在js中 template(要关联模板的id, 数据:要求–>必须是对象)
5.这个方法会返回html格式的字符串
注意 : 模板内部中不能使用全局变量

<!--原生的模板引擎文件-->
<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/artTemplate/template-native.js"></script>
<script type="text/javascript">
 
    //解决模板不能访问全局对象的问题
    template.helper("getConsole", function () {
        return console;
    })
    var data = [
        { "username": "张三", "password" : "1237756" ,"age": 20},
        { "username": "张四", "password" : "123886" ,"age": 21},
        { "username": "张五", "password" : "123996" ,"age": 22},
    ]
    var html = template("template", {list : data})
    console.log(html);
    $("table").html(html);
</script>

创建模板

<script id="template" type="text/template">
    <% getConsole().log(list);  %>
    <% jquery()(list).each(function(i, item){%>
    <tr>
        <td><%=i+1%></td>
        <td><%=item.username%></td>
        <td><%=item.password%></td>
        <td><%=item.age%></td>
    </tr>
    <% }) %>
</script>

效果图