art-template 渲染

最新推荐文章于 2025-06-08 09:09:24 发布

大失（大龄失业者）

最新推荐文章于 2025-06-08 09:09:24 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： js 文章标签： arttemplat

本文链接：https://blog.youkuaiyun.com/Json_Steve/article/details/78921849

js 专栏收录该内容

3 篇文章

订阅专栏

本文通过一个房源展示的例子，详细介绍了如何使用art-template模板引擎将后端传递的JSON数据渲染成HTML页面的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

试了一下art-template，哔哔一下自己的理解：
如果后端给前段的发送的json

{
    "data":{
        "houses":[
            {
                "address":"1",
                "area_name":"东城区",
                "ctime":"2017-12-11",
                "house_id":1,
                "img_url":"http://p0q10t5m9.bkt.clouddn.com/Fn32DiWmqEgii57xvuVfOnP_mOyD",
                "order_count":0,
                "price":100,
                "room_count":1,
                "title":"1",
                "user_avatar":"http://p0q10t5m9.bkt.clouddn.com/FkEmf4Qog6NDKIcNsVZpF9n5xSQD"
            },
            {
                "address":"2",
                "area_name":"东城区",
                "ctime":"2017-12-11",
                "house_id":2,
                "img_url":"http://p0q10t5m9.bkt.clouddn.com/FsS8G-FicLbMVkcYsvO5NxMT1Jll",
                "order_count":1,
                "price":200,
                "room_count":2,
                "title":"2",
                "user_avatar":"http://p0q10t5m9.bkt.clouddn.com/FkEmf4Qog6NDKIcNsVZpF9n5xSQD"
            },
            {
                "address":"3",
                "area_name":"东城区",
                "ctime":"2017-12-11",
                "house_id":3,
                "img_url":"http://p0q10t5m9.bkt.clouddn.com/FsS8G-FicLbMVkcYsvO5NxMT1Jll",
                "order_count":1,
                "price":3300,
                "room_count":33,
                "title":"3",
                "user_avatar":"http://p0q10t5m9.bkt.clouddn.com/FkEmf4Qog6NDKIcNsVZpF9n5xSQD"
            },
            {
                "address":"4",
                "area_name":"东城区",
                "ctime":"2017-12-11",
                "house_id":4,
                "img_url":"http://p0q10t5m9.bkt.clouddn.com/Fn32DiWmqEgii57xvuVfOnP_mOyD",
                "order_count":1,
                "price":400,
                "room_count":4,
                "title":"4",
                "user_avatar":"http://p0q10t5m9.bkt.clouddn.com/FkEmf4Qog6NDKIcNsVZpF9n5xSQD"
            },
            {
                "address":"445",
                "area_name":"东城区",
                "ctime":"2017-12-12",
                "house_id":5,
                "img_url":"http://p0q10t5m9.bkt.clouddn.com/FmRyTGuYcHzEYSdmO802oMvB_7bg",
                "order_count":2,
                "price":4500,
                "room_count":45,
                "title":"5",
                "user_avatar":"http://p0q10t5m9.bkt.clouddn.com/FkEmf4Qog6NDKIcNsVZpF9n5xSQD"
            },
            {
                "address":"2132",
                "area_name":"朝阳区",
                "ctime":"2017-12-15",
                "house_id":6,
                "img_url":"http://p0q10t5m9.bkt.clouddn.com/FsS8G-FicLbMVkcYsvO5NxMT1Jll",
                "order_count":0,
                "price":2300,
                "room_count":1,
                "title":"q",
                "user_avatar":"http://p0q10t5m9.bkt.clouddn.com/FkEmf4Qog6NDKIcNsVZpF9n5xSQD"
            }
        ]
    },
    "errmsg":"ok",
    "errno":"0"
}

html

 <ul id="houses-list" class="houses-list">
            </ul>
            <script id="houses-list-tmpl" type="text/html">
                <li>
                    <div class="new-house">
                        <a href="/newhouse.html">发布新房源</a>
                    </div>
                </li>
                {{each houses as house}}
                <li>
                    <a href="/detail.html?id={{house.house_id}}">
                        <div class="house-title">
                            <h3>房屋ID:{{house.house_id}} —— {{house.title}}</h3>
                        </div>
                        <div class="house-content">
                            <img src="{{house.img_url}}">
                            <div class="house-text">
                                <ul>
                                    <li>位于：{{house.area_name}}</li>
                                    <li>价格：￥{{(house.price/100.0).toFixed(0)}}/晚</li>
                                    <li>发布时间：{{house.ctime}}</li>
                                </ul>
                            </div>
                        </div>
                    </a>
                </li>
                {{/each}}
            </script>

js渲染：

var html = template("houses-list-tmpl", {"houses":resp.data.houses});

$("#houses-list").html(html)

houses-list-tmpl是script的id，{"houses":resp.data.houses}键所对应的{{each houses as house}}的houses变量，遍历的对象解释字典的值，也就是后台传来的数据json。
最后将template对象添加到script外层标签下。