AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

doT.js实现混合布局，判断，数组，函数使用，取模，数组嵌套

2018-01-07 1267
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

doT.js实现混合布局

　数据结构

{
    "status": "1",
    "msg": "获取成功",
    "info": {
        "id": "47",
        "user_id": "1250000172",
        "tmpl_id": "1",
        "token": "xxfisw1465885805",
        "category_id": "52",
        "name": "一扫光零食量贩",
        "logo": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160621/6/57690a53051fa.png@350w",
        "topbg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160623/c/576b36c8972b6.jpg@350w",
        "qrcode": "./Uploads/Qrcode/Store/71c34224438b1f6290c2b53a47c805ff.png",
        "slogan": "零食食小,开心事大",
        "intro": "",
        "postage": "0.00",
        "free_postage": "168.00",
        "total_pv": "46729",
        "status": "1",
        "addtime": "1465885805",
        "pay_on_delivery": "0",
        "isrecommend": "0001",
        "store_pickup": "0",
        "isshow": "1",
        "type": "1",
        "member_id": "0",
        "category_goods": [
            {
                "goods": [
                    {
                        "id": "1279",
                        "name": " 阿婆家的 干吃汤圆小麻薯",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/f/5760ef149302b.jpg@350w",
                        "price": "2.00",
                        "salecount": "2",
                        "oprice": "2.00"
                    },
                    {
                        "id": "1276",
                        "name": "百野轩番茄、香辣海苔4.5克袋开袋即食",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/c/5760edbad7ccb.jpg@350w",
                        "price": "3.00",
                        "salecount": "29",
                        "oprice": "3.00"
                    },
                    {
                        "id": "1275",
                        "name": "骥洋山椒翅尖200g",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/d/5760ed69d1728.jpg@350w",
                        "price": "11.80",
                        "salecount": "5",
                        "oprice": "11.80"
                    },
                    {
                        "id": "1273",
                        "name": "ZEK迷你传统海苔20克",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/0/5760ecbee92e0.jpg@350w",
                        "price": "15.80",
                        "salecount": "6",
                        "oprice": "15.80"
                    },
                    {
                        "id": "1272",
                        "name": "田园蔬果干70g 即食黄秋葵脆片",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/e/5760ec57ed2c3.jpg@350w",
                        "price": "15.80",
                        "salecount": "0",
                        "oprice": "15.80"
                    },
                    {
                        "id": "1267",
                        "name": "红灯记肉松香辣味蚕豆",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/b/5760ea44e8a1b.jpg@350w",
                        "price": "6.80",
                        "salecount": "0",
                        "oprice": "6.80"
                    }
                ],
                "id": "262",
                "name": "休闲零食"
            },
            {
                "goods": [
                    {
                        "id": "1220",
                        "name": "皇家爵士3合1 原味速溶咖啡",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160614/d/575fc26373fb4.jpg@350w",
                        "price": "1.50",
                        "salecount": "62",
                        "oprice": "1.50"
                    },
                    {
                        "id": "1219",
                        "name": "姜汁红糖生姜茶、姜汁黑糖生姜茶",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160614/2/575fc1fb5e3e8.jpg@350w",
                        "price": "1.60",
                        "salecount": "10",
                        "oprice": "1.60"
                    }
                ],
                "id": "267",
                "name": "咖啡饮品"
            },
            {
                "goods": [
                    {
                        "id": "1278",
                        "name": "四季之屋香烤椰片",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/a/5760eed8a56be.jpg@350w",
                        "price": "2.00",
                        "salecount": "47",
                        "oprice": "2.00"
                    },
                    {
                        "id": "1274",
                        "name": "美伦多榴莲味夹心酥饼干",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/6/5760ed14a5639.jpg@350w",
                        "price": "24.80",
                        "salecount": "5",
                        "oprice": "24.80"
                    },
                    {
                        "id": "1235",
                        "name": "利男居特色金椰子菠萝酥糕点零食100g",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/c/5760b764ef047.jpg@350w",
                        "price": "5.80",
                        "salecount": "0",
                        "oprice": "5.80"
                    },
                    {
                        "id": "1226",
                        "name": " 宜莲居 芝麻脆条 新品糕点200g",
                        "logoimg": "http://image.diandodo.com/zhudianbao/Uploads/User/u1250000172/20160615/8/5760ac73d5fa7.jpg@350w",
                        "price": "9.80",
                        "salecount": "10",
                        "oprice": "9.80"
                    }
                ],
                "id": "271",
                "name": "饼干蛋糕"
            }
        ]
    }
}

HTML

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

<script id="infotmpl" type="text/x-dot-template">
<div class="aui-card-list-content">
    <img src="{{= it.topbg}}">
    <div class="aui-row">
        <div class="aui-col-xs-2">
            <img style="border:1px solid #fff;margin:3px;" src="{{= it.logo}}">
        </div>
        <div class="aui-col-xs-4" style="padding-left: 5px;">
            <div class="aui-grid-label">
                <h4>{{= it.name}}</h4>
                <img style="width:3rem;" src="../image/zyd.png">
                <p>评分4.8分</p>
            </div>
        </div>
        <div class="aui-col-xs-4" style="top:18px;">
            <div class="aui-col-xs-5">
                <div class="aui-grid-label">3.7万</div>
                <p>人在卖</p>
            </div>
            <div class="aui-col-xs-7" style="border-left: 1px solid;padding-left: 10px;">
                <div class="aui-grid-label">2067</div>
                <p>人关注</p>
            </div>
        </div>
        <div class="aui-col-xs-2" style="text-align: right;right: -3px;top:5px;">
            <div class="aui-btn aui-btn-warning">
                <i class="aui-iconfont aui-icon-star" style="margin-right: 0;"></i>
                <div class="aui-bar-tab-label">关注</div>
            </div>
        </div>
    </div>
</div>
<div class="aui-tab" id="tab">
    <div class="aui-tab-item aui-active" tapmode="" data-item-order="0">
        <i class="aui-iconfont aui-icon-home"></i>
        <div class="aui-bar-tab-label">店铺首页</div>
    </div>
    <div class="aui-tab-item" tapmode="" data-item-order="1">
        <i class="aui-iconfont aui-icon-cart"></i>
        <div class="aui-bar-tab-label">购买</div>
    </div>
    <div class="aui-tab-item" tapmode="" data-item-order="2">
        <i class="aui-iconfont aui-icon-share"></i>
        <div class="aui-bar-tab-label">代销</div>
    </div>
    <div class="aui-tab-item" tapmode="" data-item-order="3">
        <i class="aui-iconfont aui-icon-cert"></i>
        <div class="aui-bar-tab-label">店铺简介</div>
    </div>
</div>

{{~ it.category_goods:cval:ckey}}
<div class="aui-card-list ">
    <div class="rxsp">
        <div class="aui-pull-left"><h3>{{= cval.name}}</h3></div>
        <a class="aui-pull-right ">
            更多
            <span class="aui-iconfont aui-icon-right"></span>
        </a>
    </div>
    
    {{~ cval.goods:gval:gkey}}
    {{? gkey%2 === 0}}
    <div class="aui-list-item-inner" style="margin-bottom: 15px;">
        <div class=" aui-row-padded">
    {{?}}

            <div class="aui-col-xs-6">
                <img src="{{= gval.logoimg}}" style="height: 150px;" onclick="openWin('goods_detail')">
                <p class="tit">{{= cutstr(gval.name,12)}}</p>
                <h3 class="red">￥{{= gval.price}}</h3>
                <div class="aui-info" style="padding-top:0">

                    <div class="aui-info-item">
                        <span style="text-decoration:line-through;">￥{{= gval.oprice}}</span>
                    </div>
                    <div class="jifen">销量{{= gval.salecount}}件</div>
                </div>
            </div>

    {{? gkey%2 === 1}}
        </div>
    </div>
    {{?}}
    {{~}}

</div>
<div style="clear:both;"></div>
{{~}}

</script>

1.第一层直接使用

{{= it.topbg}}

2.第二层使用

{{~ it.category_goods:cval:ckey}}

{{~}}

3.在第二层中继续嵌套，调用第三层数据

{{~ cval.goods:gval:gkey}}

{{~}}

4.在第三层中使用取模和判断

{{? gkey%2 === 0}}

{{?}}

5.在第三层中使用函数

{{= cutstr(gval.name,12)}}

JS

/** 
 * js截取字符串，中英文都能用 
 * @param str：需要截取的字符串 
 * @param len: 需要截取的长度 
 */
function cutstr(str, len) {
    var str_length = 0;
    var str_len = 0;
    str_cut = new String();
    str_len = str.length;
    for (var i = 0; i < str_len; i++) {
        a = str.charAt(i);
        str_length++;
        if (escape(a).length > 4) {
            //中文字符的长度经编码之后大于4  
            str_length++;
        }
        str_cut = str_cut.concat(a);
        if (str_length >= len) {
            str_cut = str_cut.concat("...");
            return str_cut;
        }
    }
    //如果给定字符串小于指定长度，则返回源字符串；  
    if (str_length < len) {
        return str;
    }
}

apiready = function(){
    api.parseTapmode();
    var store_id = api.pageParam.store_id;
    // 获取商品相关信息
    api.ajax({
        url: 'http://zhudianbao.yunlutong.com/?g=Api&m=Store&a=getStoreInfo',
        method: 'get',
        data: {
            values: {
                store_id: store_id
            }
        }
    }, function(json, err) {
        if (json.status == '1') {
            var interText = doT.template($("#infotmpl").text());
            $("#info_area").html(interText(json.info));
            
        } else {
            var toast = new auiToast();
            toast.fail({
                title:json.msg,
                duration:2000
            });
        }
    });
}

小结

doT中可以使用js原生的内容，多多尝试吧~


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

文章标签：
JavaScript
数据格式
JSON
关键词：
JavaScript函数
JavaScript数组
JavaScript布局
JavaScript数组函数
JavaScript嵌套
桃子红了呐
目录
相关文章
进步`于辰
|
7天前
|
JavaScript 前端开发 Java
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
本文介绍了JavaScript中常用的函数和方法，包括通用函数、Global对象函数以及数组相关函数。详细列出了每个函数的参数、返回值及使用说明，并提供了示例代码。文章强调了函数的学习应结合源码和实践，适合JavaScript初学者和进阶开发者参考。
进步`于辰
16 2
[JS]同事：这次就算了，下班回去赶紧补补内置函数，再犯肯定被主管骂
大树营养快线
|
6天前
|
前端开发 JavaScript 开发者
除了 Generator 函数，还有哪些 JavaScript 异步编程解决方案？
【10月更文挑战第30天】开发者可以根据具体的项目情况选择合适的方式来处理异步操作，以实现高效、可读和易于维护的代码。
大树营养快线
19 2
游客44yag4ft7nckq
|
20天前
|
JavaScript 前端开发
JavaScript 函数语法
JavaScript 函数是使用 `function` 关键词定义的代码块，可在调用时执行特定任务。函数可以无参或带参，参数用于传递值并在函数内部使用。函数调用可在事件触发时进行，如用户点击按钮。JavaScript 对大小写敏感，函数名和关键词必须严格匹配。示例中展示了如何通过不同参数调用函数以生成不同的输出。
游客44yag4ft7nckq
15 1
德国都芳最好
|
22天前
|
存储 JavaScript 前端开发
JS函数提升 变量提升
【10月更文挑战第6天】函数提升和变量提升是 JavaScript 语言的重要特性，但它们也可能带来一些困惑和潜在的问题。通过深入理解和掌握它们的原理和表现，开发者可以更好地编写和维护 JavaScript 代码，避免因不了解这些机制而导致的错误和不一致。同时，不断提高对执行上下文等相关概念的认识，将有助于提升对 JavaScript 语言的整体理解和运用能力。
德国都芳最好
15 1
chnjames
|
26天前
|
自然语言处理 前端开发 JavaScript
🛠️ JavaScript数组操作指南：20个精通必备技巧🚀
本文详细介绍了 JavaScript 中的 20 个高效数组操作技巧，涵盖了从基本的添加、移除元素，到数组转换和去重等高级操作。强调了不可变性的重要性，提供了清晰的代码示例，帮助开发者编写更整洁和高效的代码。无论是新手还是经验丰富的开发者，这些技巧都将显著提升您的编码能力，使您在项目中更具竞争力。
chnjames
17 2
神明木佑
|
29天前
|
JavaScript 前端开发 测试技术
JS都有哪些操作数组的方法
JS都有哪些操作数组的方法
神明木佑
20 3
邹荣乐
|
25天前
|
存储 JavaScript 前端开发
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
JavaScript数据类型全解：编写通用函数，精准判断各种数据类型
邹荣乐
16 0
神明木佑
|
29天前
|
JavaScript 前端开发 API
JS中数组的方法flat()怎么用
JS中数组的方法flat()怎么用
神明木佑
13 0
神明木佑
|
29天前
|
JavaScript 前端开发 容器
js之弹性布局使用方法
js之弹性布局使用方法
神明木佑
25 0
热爱技术的小郑
|
3月前
|
JavaScript 前端开发 索引
JS遍历数组里数组下的对象，根据数组中对象的某些值，组合成新的数组对象
这篇文章介绍了如何在JavaScript中遍历数组里数组下的对象，并根据对象的某些属性值组合成一个新的数组对象。主要内容包括使用ES6的`for...of`循环来遍历数组对象，然后根据需要提取对象中的属性值，并将它们放入新的对象中，最终形成一个新的对象数组以供使用。
热爱技术的小郑
301 3

热门文章

最新文章

  • 1
    《JavaScript应用程序设计》一一2.9 方法API的设计
  • 2
    YY游戏云的angular js实践总结
  • 3
    javascript类型系统之Array
  • 4
    好程序员web前端培训分享JavaScript学习笔记cookie
  • 5
    JavaScript值得注意的小知识点
  • 6
    js: 删除node的所有child
  • 7
    HTML6 无 JavaScript 的单页应用引起一片哗然
  • 8
    JavaScript 删除数组中指定元素(5种方法)
  • 9
    JavaScript 图片切割效果
  • 10
    JS中document对象详解
  • 1
    编写JavaScript模块化代码主要涉及将代码分割成不同的文件或模块，每个模块负责处理特定的功能或任务
    47
  • 2
    在 JavaScript 中，异步编程和回调函数是处理非阻塞操作（如网络请求、文件读写等）的重要工具
    44
  • 3
    在JavaScript中，回调函数是一种非常强大的工具
    35
  • 4
    javascript操作DIV总结 转
    52
  • 5
    [JS]百度地图设置城市
    57
  • 6
    nvm, node.js, npm, yarn 安装配置
    283
  • 7
    JS长按保存canvas绘图
    44
  • 8
    JavaScript实现识别二维码信息功能
    102
  • 9
    JS tostring（）和join（）方法
    37
  • 10
    深入了解JavaScript中的indexOf()方法：实现数组元素的搜索和索引获取
    79

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript面向对象的程序设计
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 常见类型-3：数组元组的方法
    • 下一篇
    无影云桌面