doT js模板入门 3

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)

时间: 2024-09-17 04:37:19

doT js模板入门 3的相关文章

doT js模板入门

doT.js github地址: doT.js 官方网站 实例1:简单 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="../../doT.js"></scr

doT js模板入门 2

doT js 使用{{}} 非常类似于JSP,所以用起来感觉很亲切,很顺手 {{–><% }}–>%> 例如: <div id="evaluationtmpl"> {{ for(var prop in it) { }} <div>KEY:{{= prop }}---VALUE:{{= it[prop] }}</div> {{ } }} </div> 是不是很像: <div id="evaluatio

doT js 常见错误

doT 模板一般是放在script脚本里面的,例如: Html代码   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <title></title>       <script type="text/javascript" src="../../do

doT JS

1doT.js github地址: http://olado.github.io/doT/ 实例1:简单 Html代码   <!DOCTYPE html>   <html lang="en">   <head>       <meta charset="UTF-8">       <title></title>       <script type="text/javascrip

Vue.js快速入门教程_javascript技巧

像AngularJS这种前端框架可以让我们非常方便地开发出强大的单页应用,然而有时候Angular这种大型框架对于我们的项目来说过于庞大,很多功能不一定会用到.这时候我们就需要评估一下使用它的必要性了.如果我们仅仅需要在一个简单的网页里添加屈指可数的几个功能,那么用Angular就太麻烦了,必要的安装.配置.编写路由和设计控制器等等工作显得过于繁琐. 这时候我们需要一个更加轻量级的解决方案.Vue.js就是一个不错的选择.Vue.js是一个专注于视图模型(ViewModal)的框架.视图模型是U

Office2003重命名 Normal.dot 共用模板

若要防止格式设置,自动图文集和宏影响 Word 及您打开时,该文档的行为从存储在共用模板 (Normal.dot) 中的重命名全局模板.重新启动 Word 以典型方式 (不使用支持模板),Word 会创建一个新 Normal.dot 共用模板. 操作步骤: 注意: 如果您重命名 Normal.dot 共用模板,几个选项重置为其默认设置.要重置的选项包括自定义样式. 自定义工具栏. 宏和自动图文集词条.因此,Microsoft 强烈建议您删除 Normal.dot 共用模板. 某些情况下的可以创建

如何通过Word 2003 找到 Normal.dot 共用模板

概要本文讨论了 Microsoft Word 2003 如何搜索其 Normal.dot 共用模板.因为 Word 2003 的搜索 Normal.dot 模板以不同的方式从其搜索 Microsoft Word 的早期版本中的模板的方式的行为以不同的方式从其他共用模板 Normal.dot 模板. 如果 Normal.dot 模板不在一个 Word 2003 希望找到该文件夹中,Word 2003 中搜索不同的模板 (根据您的安装的类型) 的文件夹路径,Word 2003 将使用它所发现的第一个

javascript-handlebars JS模板引擎的语句问题?

问题描述 handlebars JS模板引擎的语句问题? <script type=""text/x-handlebars-template"" id=""tpl-vote-button""> {{#if}} {{#compare joined 0}} <a href=""javascript:;"" id=""btn-vote-submit&quo

doT js 宏的使用

doT js 宏的使用 Html代码   <script id="serviceItemTemplate" type="text/x-dot-template">           {{##def.spaceUnit:           {{? it.policyInfo.storageUnit==1 }}K{{?? it.policyInfo.storageUnit==2}}M{{?? it.policyInfo.storageUnit==3}}G