doT.js变量和数组混合读取方式

最新推荐文章于 2025-05-07 18:51:08 发布

转载最新推荐文章于 2025-05-07 18:51:08 发布 · 235 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/347551

文章标签：

#javascript #数据结构与算法 #ViewUI

本文介绍了一种在HTML中使用JS进行数据渲染的方法。通过定义数据结构，并利用特定的模板语法来展示数据，实现动态内容填充。支持单个变量及数组的显示，最后通过JS代码将模板和数据结合。

可以包裹任意大小的html
变量在其包裹的任意区域都有效
单个变量可以和数组分开展示
最好放置在最下方执行js

数据结构

var data = {
        "id": "1280",
        "name": "漂亮的衣服",
        "price": "100",
        "oprice": "150",
        "goods_img": [
            "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/a/578c97464f436.jpg@1000w",
            "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/d/578c973b1fa40.jpg@1000w",
            "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000189/20160718/6/578c973352e0f.jpg@1000w"
        ]
    };

区域div

<div id="info_area"></div>

包裹区域

<script id="goodstmpl" type="text/x-dot-template">
...
</script>

单个变量使用

<div class="aui-title">{{= it.name}}</div>

变量中数组使用

方式1

{{ for(var prop in it['goods_img']) { }}
<div class="swiper-slide li">
<a href="javascript:;">
    <img src="{{= it['goods_img'][prop] }}"
         data-img="{{= it['goods_img'][prop] }}">
</a>
</div>
{{ } }}

方式2

{{~ it.goods_img:v}}
<div class="swiper-slide li">
    <a href="javascript:;">
        <img src="{{= v }}"
             data-img="{{= v }}">
    </a>
</div>
{{~}}

方式3

{{ for(var prop in it['goods_img']) { }}
{{ var v = it['goods_img'][prop]; }}
<div class="swiper-slide li">
    <a href="javascript:;">
        <img src="{{= v }}"
             data-img="{{= v }}">
    </a>
</div>
{{ } }}

JS处理

var interText = doT.template($("#goodstmpl").text());
$("#info_area").html(interText(data));

小结

很好用~

本文转自TBHacker博客园博客，原文链接：http://www.cnblogs.com/jiqing9006/p/5949852.html，如需转载请自行联系原作者