artTemplate子模板和辅助函数详解

最新推荐文章于 2022-11-05 11:52:47 发布

Buddha_ITXiong

最新推荐文章于 2022-11-05 11:52:47 发布

阅读量2.2k

点赞数 1

分类专栏： javascript 文章标签： artTemplate

本文链接：https://blog.csdn.net/Buddha_ITXiong/article/details/79608990

版权

javascript 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

我们知道artTemplate是一个前端模板引擎，可以使我们告别字符串拼接渲染的麻烦。关于这个模板的优点和具体用法我就不一个个解释。我在这里只针对于其中的子模板和辅助函数并用实际代码例子来详细的解释一下。

先看代码和效果图：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width">
    <title>Title</title>
    <style>
        *{margin: 0;padding: 0;}
        #table{width: 1000px;font-size: 14px;color: #313131;text-align: center;}
        #table td,th{height: 25px;line-height: 25px;}
    </style>
</head>
<body>
<table id="table" border="1" cellpadding="0" cellspacing="0">
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
        <th>籍贯</th>
        <th>薪水</th>
        <th>兴趣爱好</th>
    </tr>
    <script type="text/html" id="list-template">
        {{each list as item}}
            <tr>
                <td>{{item.id}}</td>
                <td>{{item.name}}</td>
                <td>{{item.sex}}</td>
                <td>{{item.age}}</td>
                <td>{{item.address}}</td>
                <td>{{item.salary | getSalary}}</td>
                <td>{{include "childTemplate" item}}</td>
            </tr>
        {{/each}}
    </script>
</table>
</body>


<!--子模板-->
<script id="childTemplate" type="text/html">
    {{each interest as item}}
        <span>{{item}}</span>
    {{/each}}
</script>

<script src="jquery.min.js"></script>
<script src="template.js"></script>
<script>
    $(function(){
        getList(); //初始化加载数据
    });

    //定义获取数据函数
    function getList(){
        var data={
            list:[
                {id:1,name:"张三",sex:"男",age:41,address:"江西南昌",salary:3000.45,interest:["读书","音乐"]},
                {id:2,name:"李四",sex:"女",age:29,address:"广东深圳",salary:2189.6,interest:["足球"]},
                {id:3,name:"王五",sex:"男",age:35,address:"浙江杭州",salary:8975.43,interest:["游泳","打游戏","篮球"]},
                {id:4,name:"赵六",sex:"男",age:20,address:"湖北武汉",salary:6300,interest:["书法","羽毛球","音乐","兵乓球"]},
                {id:5,name:"钱七",sex:"女",age:15,address:"湖南长沙",salary:4500.6,interest:["兵乓球","象棋","篮球"]}
            ]
        };
        renderHtml(data);
    }

    //定义渲染页面函数
    function renderHtml(data){
        var html=template("list-template",data);
        $("#table").append(html);
    }


    //定义辅助函数转换日期格式
    template.helper("getSalary", function (salary) {
           return "￥"+parseInt(salary);
    });
</script>
</html>
--------------------- 
作者：Buddha_ITXiong 
来源：CSDN 
原文：https://blog.csdn.net/Buddha_ITXiong/article/details/79608990 
版权声明：本文为博主原创文章，转载请附上博文链接！

以下为图片解释：

Buddha_ITXiong

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
artTemplate子模板和辅助函数详解

我们知道artTemplate是一个前端模板引擎，可以使我们告别字符串拼接渲染的麻烦。关于这个模板的优点和具体用法我就不一个个解释。我在这里只针对于其中的子模板和辅助函数并用实际代码例子来详细的解释一下。先看代码和效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="U...
复制链接

扫一扫