doT js模板入门 3

简介: <div class="markdown_views"><p><strong>for 循环前判断循环的list是否为空</strong></p><pre class="prettyprint"><code class=" hljs handlebars"><span class="xml"><span class="hljs-tag"><<span class="h

for 循环前判断循环的list是否为空

<script id="invoiceListDot" type="text/x-dot-template">
                {{? it.invoiceInfoDtos}}
                {{ for(var prop=0;prop
                <it.invoiceInfoDtos.length
                        ; prop++){ }}
                <div class="{{ if(prop==0){}}invoice-infor {{ }else {}}no-invoice{{ }}}" data-index="{{= prop }}">
                    <span class="no-ivoice-icon"></span>
                    <span>普通发票</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].content }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].title }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].address }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].receiver }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].phone }}</span>
                </div>
                {{ } }}
                {{?}}
            </script>

if 判断

<li class="company-state">
                    {{? it.orgAppRelList[i].expire }}
                    {{=it.orgAppRelList[i].endDate }}已过期
                    {{?? }}
                    {{? it.orgAppRelList[i].isTrial }}
                    试用中的企业无法订购,<span class="warning">{{=it.orgAppRelList[i].endTime }}过期</span>
                    {{?? }}
                    {{? it.orgAppRelList[i].status=='001' }} 未购买{{?? it.orgAppRelList[i].status=='002'}}已支付 {{?? }}已购买&nbsp;
                    {{=it.orgAppRelList[i].endDate }}过期
                    {{? }}
                    {{?}}
                    {{?}}
                </li>

宏的使用

<div class="content" id="serviceItem">
            {{##def.spaceUnit:
            {{? it.productPrice.policyInfo.storageUnit==1 }}K{{?? it.productPrice.policyInfo.storageUnit==2}}M{{??
            it.productPrice.policyInfo.storageUnit==3}}G {{?? }}T {{? }}
            #}}

            <div class="buy-list">
                <ul>
                    <li class="buy-name">购买时长:</li>
                    <li class="buy-select"><p>{{=it.productPrice.userPeriod}}个月</p></li>
                    <li class="buy-unit"></li>
                    <li class="buy-state">预计到期时间:{{=it.productPrice.endTime}}</li>
                </ul>
            </div>
            <div class="buy-list">
                <ul>
                    <li class="buy-name">用户数:</li>
                    <li class="buy-select"><input name="userCount" onkeypress="eventUtil.onlyNumberKeyPress(event)"
                                                  type="text"></li>
                    <li class="buy-unit"></li>
                    <li class="buy-state">用户单价 {{=it.productPrice.normalPriceDto.userPeriodPrice}}元/人
                        {{? it.productPrice.policyInfoDto.periodUnit==1 }}{{??
                        it.productPrice.policyInfoDto.periodUnit==2}}{{??
                        it.productPrice.policyInfoDto.periodUnit==3}}{{?? }}单位未知 {{? }}
                        <span class="warning">(目前只支持200人以内的团队)</span></li>
                </ul>
            </div>

            <div class="buy-list">
                <ul>
                    <li class="buy-name">扩容空间(所有):</li>
                    <li class="buy-select"><input name="expansion_storage"
                                                  onkeypress="eventUtil.onlyNumberKeyPress(event)" type="text"></li>
                    <li class="buy-unit">{{#def.spaceUnit}}</li>
                    <li class="buy-state">空间单价 {{=it.productPrice.normalPriceDto.storagePrice}}元/
                        {{#def.spaceUnit}}
                    </li>
                </ul>
            </div>
        </div>

参考:
doT js 入门
作者:黄威(1287789687@qq.com)

相关文章
|
1月前
|
JavaScript 前端开发 C语言
javascript基础入门
javascript基础入门
23 1
|
3月前
|
JSON JavaScript 前端开发
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
Danfo.js专题 - Danfo.js与Dnotebook简介与入门
46 0
|
3月前
|
JSON JavaScript 前端开发
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)(下)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
49 2
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
3月前
|
JavaScript 前端开发 API
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(下)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
34 0
|
3月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)(上)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
42 0
|
3月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)(下)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
25 0
|
27天前
|
SQL JavaScript
js开发:请解释什么是ES6的模板字符串(template string),并给出一个示例。
ES6的模板字符串以反引号包围,支持变量和表达式插入以及多行书写。例如,插入变量值`Hello, ${name}!`,计算表达式`${num1 + num2}`,以及创建多行字符串。模板字符串保留原始空格和缩进,简化了字符串拼接,提高了代码可读性。
18 6
|
1月前
|
自然语言处理 JavaScript 前端开发
Vue.js 深度解析:模板编译原理与过程
Vue.js 深度解析:模板编译原理与过程