jQuery的art-template模板渲染案例

最新推荐文章于 2024-08-10 07:07:58 发布

YingMuMonkey

最新推荐文章于 2024-08-10 07:07:58 发布

阅读量2.6k

点赞数

分类专栏：随记文章标签：前端

本文链接：https://blog.csdn.net/YingDaoMonkey/article/details/81071119

版权

随记专栏收录该内容

100 篇文章 0 订阅

订阅专栏

一、需要在npm下载art-template和jquery

<script src="../node_modules/art-template/lib/template-web.js"></script>

二、ajax获取到的数据

<script>
    $(function () {
        // 获取所有的英雄
        // console.log("进入函数里面")
        $.ajax({
            type: "get",
            url: "http://127.0.0.1:5000/api/getheros",
            dataType: "json",
            success: function (result) {
                console.log(result)
               var htnlStr = template("getheros", result)
               $("tbody").html(htnlStr);
            }
        });
    });
</script>

三、模板渲染（循环方法用的是each,value是自带的，不能写成其他）


<script id="getheros" type="text/template">
    {{ each message }}
            <tr>
                <td>{{$value.id}}</td>
                <td>{{$value.name}}</td>
                <td>{{$value.age}}</td>
                <td>{{$value.gender}}</td>
                <td>{{$value.isdel}}</td>
                <td>{{$value.ctime}}</td>
                <td>编辑</td>
            </tr>
   {{ /each}}
</script>

四、需要添加到tbody里

<body>
    <div class="container">
        <table class="table table-striped">
            <thead>
                <tr>
                    <td>id</td>
                    <td>姓名</td>
                    <td>年纪</td>
                    <td>性别</td>
                    <td>软删除</td>
                    <td>创建时间</td>
                    <td>编辑</td>
                </tr>
            </thead>
            <tbody>
        
            </tbody>
        </table>
    </div>

message ：为得到的数据result里面的属性