artTemplate的使用总结

最新推荐文章于 2021-01-21 23:19:45 发布

徐扬_前端小白的成长之路

最新推荐文章于 2021-01-21 23:19:45 发布

阅读量332

点赞数 1

分类专栏： JS

本文链接：https://blog.csdn.net/weixin_36302575/article/details/84935754

版权

JS 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

正常artTemplate这套模版渲染数据用的是{{}}，公司内部用的给改成了{[]}。

demo：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="js/jquery-1.11.3.js"></script>
    <script src="js/template.js"></script>
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .clearfix:after{display: block;clear: both;content: "";visibility: hidden;height: 0;}
        .clearfix{zoom:1;} 
        .fl{float: left;}
        .fr{float: right;}

        .touzi_free_list {height: 400px;overflow-y: auto;width: 330px;margin: 50px auto;border: 1px solid #eaeae2;}
        .touzi_free_list ul li {border-bottom: 1px solid #eaeae2;overflow: hidden;clear: both;}
        .touzi_free_list ul li a {display: block;padding: 16px 10px 12px;}
        .touzi_free_list .audi_tt .audi_h3 {font-size: 14px;color: #333333;font-weight: normal;line-height: 22px;margin-bottom: 5px;}
        .touzi_free_list .audi_tt .audi_p {font-size: 12px;color: #666666;font-weight: bold;}
    </style>
</head>
<body>   
    <div class="touzi_free_list">
        <ul id="js_auditionBox"></ul>
    </div>
    <script id="js_tmpAuditionItem" type="text/html">
        <li>
            <a href="/videoplay?id={[id]}&tid={[teacher_id]}" class="clearfix" data-id="{[id]}">
                <div class="audi_tt fl">
                    <h3 class="audi_h3">{[updated_at]}</h3>
                    <p class="audi_p">讲师：{[product_title]}</p>
                </div>
            </a>
        </li>
    </script>
    <script>
        $.ajax({
            type: 'post',
            url: ＊＊＊,
            dataType: 'json',
            success: function (data) {
                var a = data.list;
                var html = '';
                for (var i = 0; i < a.length; i++) {
                    html += template('js_tmpAuditionItem', a[i]);
                }
                $('#js_auditionBox').append(html);
            }
        }) 
    </script>
</body>
</html>

徐扬_前端小白的成长之路

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
artTemplate的使用总结

正常artTemplate这套模版渲染数据用的是{{}}，公司内部用的给改成了{[]}。模版地址：请点这里.demo：&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt;
复制链接

扫一扫

专栏目录