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)

doT js模板入门 3相关推荐

doT js模板入门
官网: http://olado.github.io doT.js详细使用介绍使用方法: {{= }} for interpolation {{ }} for evaluation {{~ }} f ...
doT.js 模板引擎的使用
dot.js是一个模板框架,在web前端使用. dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你 ...
Node.js开发入门—使用jade模板引擎
在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本 ...
doT.js-doT模板方便快捷的组织页面DOM
重来没有想过,作为一个坐吃等死的前端也会有学习引擎模板的一天都是被现实所逼呀.学习优秀代码时,一句一句翻译.忽然看到{{ }}这个包裹的代码.糟心了!看不懂,咋办?学呀!!!!!! 这是我开始学 ...
js模板引擎_VueSSRNuxt.js
服务端渲染Server side rendering 概念:什么是服务端渲染,什么是客户端渲染相对于现在前端开发的前后分离模式,服务端渲染应该是更早时代的产物: 服务端渲染:在早期的时候,由于页 ...
前端渲染引擎doT.js解析
背景前端渲染有很多框架,而且形式和内容在不断发生变化.这些演变的背后是设计模式的变化,而归根到底是功能划分逻辑的演变:MVC->MVP->MVVM(忽略最早混在一起的写法,那不称为模式) ...
js模板引擎art template数组渲染的方法
转载:js模板引擎art template数组渲染的方法 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注,模板引擎种类也是五花八门,我就说几个安全性高.错误处理调 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
[Vue.js 1] 入门基础知识与开发
最近接触的几个项目框架全部用到了Vue.js技术,没办法只能对vuejs进行深入学习,不过可喜的是Vue.js学习路线非常快,上手也是非常快的,所以对于前端开发也是主流的开发框架了.不过其中的js部分 ...

doT js模板入门 3

doT js模板入门 3相关推荐

最新文章

热门文章