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

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，如需转载请自行联系原作者