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 入门

作者:黄威([email protected])

版权声明:本文为博主原创文章,未经博主允许不得转载。

时间: 2024-08-06 00:47:23

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

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.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 模板引擎【初探】

js中拼接html,总是感觉不够优雅,本着要优雅不要污,决定尝试js模板引擎. JavaScript 模板引擎 JavaScript 模板引擎作为数据与界面分离工作中最重要一环,越来越受开发者关注. 常见模板引擎 baiduTemplate(百度)\artTemplate(腾讯)\juicer(淘宝)\doT\ tmpl\ handlebars\ easyTemplate\ underscoretemplate \ mustache \kissytemplate等 为什么选择doT: doT.j

dot.js简单入门

doT.js是一个轻量简单的模板输出js. 下面介绍一下它的基本用法.1.输出   基本输出:{{= }}     原样输出:{{! }} <div id="info"></div> <script id="dot-template" type="text/x-dot-template"> <p>name:{{=it.name}}</p> <p>age:{{=it.age}}

doT.js 模板引擎的使用

模版引擎之前在介绍mustache时已经提到了.doT.mustache各有优势吧,如果用于JS环境,doT的性能更胜一筹,并且套语句更方便些.现在公司的mobile页面已经被我替换成doT了. doT source: https://github.com/olado/doTDocs: http://olado.github.com/doT/ doT上手比较容易,但之前熟悉了mustache,改用doT时有点不习惯,但用两次就好了. 下载doT.js(里面有个doU.js不要用,doU.js是为

模板引擎doT.js

作为一名前端攻城师,经常会遇到从后台ajax拉取数据再显示在页面的情境,一开始我们都是从后台拉取再用字符串拼接的方式去更达到数据显示在页面! <!-- 显示区域 --> <div id="testid"></div> <script type="text/javascript"> var testjson={"name":"张三","age":31,"

Node.js开发入门—使用jade模板引擎

在"Node.js开发入门--Express安装与使用"里,我们曾经使用express generator创建了一个HelloExpress网站,express工具为我们生成了基本的目录结构.模板.stylesheet.routers等.虽然那只是一个简单的HelloWorld类的小东西,可里面包含的内容还是有些多了,为了更好的理解Express所支持的jade模板引擎的用法,我们这次提供一个手动创建的小网站,可以显示来访者的IP,并对访问进行计数. 安装jade npm instal

doT.js——前端javascript模板引擎问题备忘录

我手里维护的一个项目,遇到一个问题:原项目的开发人员在Javascript中,大量的拼接HTML,导致代码极丑,极难维护.他们怎么能够忍受的了这么丑陋.拙劣的代码呢,也许是他们的忍受力极强,压根就没想去寻找解决方法. 可是,我,是万难不能接受这种丑陋的解决方式的.有没有优雅的解决方法呢,于是在网上搜索到了doT.js. 主页很简洁,就一个页面,研究了一下,就顺利的上手了,相当的简单易用.主要分两步走. 1.写模板 写模板,就用官方文档里提供给你的三板斧就搞定了,当然总共不止三个: {{ }} f

dot.js-js模板引擎使用,教程,入门

dot.js是一个模板框架,在web前端使用. doT.min.js是dot.js的压缩版. 简单demo代码: html.javascript代码一览: 在浏览器运行的效果: dot.js作为模板引擎, 主要的用途就是,在写好的模板上,放进数据,生成含有数据的html代码. 这是很简单的web前端模板框架, 简单说几个东西,你就会用了! 1.在模板中,it这个变量,就是传递进去的数据对象,应该就是英语的items: 2. doT.template( template )( obj )  代码解