artTemplate 模板使用
下载github中文件，浏览器引用lib/template-web.js
模板html:
{{each ProductInfoList as prd}}
<div class="result-item clearfix">
<div class="item-left clearfix" pid="{{prd.PrdId}}">
<div class="left-img">
<img src="{{prd.OrgLogo}}" alt="">
</div>
<div class="left-infor">
<p class="infor-title">
<span class="item-compant">{{(prd.ShortOrgName==null||prd.ShortOrgName=="")?prd.OrgName:prd.ShortOrgName}}</span>-<span class="item-product">{{prd.PrdName}}</span>
</p>
<p class="infor-label clearfix">
{{#prd.PrdTitles}}
</p>
<div class="infor-detail f-pr">
<p>
要求：22-25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。
要求：22-25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。
</p>
<section class="ruleDetail">
<div class="">
<ul class="detail-rule">
<li>
<h5>规则1</h5>
<p>要求：22-25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。</p>
</li>
<li>
<h5>规则2</h5>
<p>要求：22-25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。25周岁，打卡工资税后4000以上，现单位工作满3个月；征信要求半年无2，一年无3，征信空白不可做。</p>
</li>
</ul>
<p class="detail-notice">注：如有多条规则时，满足其中一组即可。</p>
<ul class="detail-saying">
<h5>补充说明</h5>
<li class="clearfix"><span class="saying-index">1、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">2、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">3、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">4、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">5、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">6、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">7、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">8、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">9、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">10、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">11、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
<li class="clearfix"><span class="saying-index">12、</span><p class="saying-con">本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍本地户籍</p></li>
</ul>
</div>
<span class="shade"></span>
</section>
</div>
{{if prd.PrdComment!=null}}
<p class="infor-comment f-pr">
<i></i> {{prd.PrdComment}}
</p>
{{/if}}
</div>
</div>
<div class="item-right clearfix">
<div class="right-infor f-fl">
<p class="infor-interest">利息总额<span class="interest-amount">{{prd.StrTotalInterest}}</span>月费率<span class="interest-rate">{{prd.MonthlyRateLeast2}}</span></p>
<div class="infor-rate f-pr">
<p>{{prd.RateTitle}}<span class="rate-total f-pr curPointer">{{prd.RateStrMonthly}}<i></i></span></p>
{{if prd.RateDetailList}}
<ul class="rate-detail">
{{#prd.RateDetailList}}
</ul>
{{/if}}
</div>
<p class="infor-time">放款时间<span>{{prd.PrtPassLeast}}天</span></p>
</div>
<div class="right-btn f-fr">
<p class="btn"><a href="">查看详情</a></p>
<p class="saying"><span>{{prd.ApplyUserCount}}</span>人成功申请</p>
</div>
</div>
</div>
{{/each}}
引用局部视图
<script id="productList" type="text/html">
@Html.Partial("TemplateProductList")
</script>
js操作；
var list = data.ProductInfoList;
if (list!=null&&list.length > 0) {
$(list).each(function (key, val) {
var titles = "";
if (val.AssureTypeName != "" && val.AssureTypeName != null) {
titles += " <span class='label-key'>" + val.AssureTypeName + "</span> ";
}
if (val.PrtTypeName != "" && val.PrtTypeName != null) {
titles += " <span class='label-key'>" + val.PrtTypeName + "</span>";
}
if (val.IdentityName != "" && val.IdentityName != null) {
var arr = val.IdentityName.split(',');
$(arr).each(function (k, v) {
titles += " <span>" + v + "</span>";
})
}
val.PrdTitles = titles;
if (val.PriceRateDetailsList.length > 0) {
var first = val.PriceRateDetailsList[0];
val.StrTotalInterest = first.StrTotalInterest;
val.MonthlyRateLeast2 = (val.MonthlyRateLeast == 0 || val.MonthlyRateLeast == null) ? "面议" : parseFloat(val.MonthlyRateLeast / 1.8).toFixed(2) + "%";
val.RateTitle = first.Title;
val.RateStrMonthly = first.StrMonthly;
var cont = "";
if (val.MonthlyRateLeast != null && val.MonthlyRateLeast > 0) {
$(val.PriceRateDetailsList).each(function (k, v) {
if (v.StrMonthly != "面议" && v.StrMonthly != "--") {
cont += " <li class=\"rate-item clearfix\">";
cont += "<div class=\"item-title f-pr\">";
cont += " <i></i><span>" + v.Title + ":</span>";
cont += " </div>";
cont += "<div class=\"item-detail noBorder\">";
cont += " <p class=\"detailTitle\">" + v.Text + "</p>";
if (v.BackType == 1) {
cont += " <p class=\"detailSaying\">每月按相等的金额偿还本息，是较常用的还款方式</p>";
} else if (v.BackType == 2) {
cont += " <p class=\"detailSaying\">每月本金保持相同，利息逐月递减；起初还款压力较大，但总利息较低</p>";
}
else if (v.BackType == 3) {
cont += " <p class=\"detailSaying\">按期还利息，期终还本金，还款压力小</p>";
}
else if (v.BackType == 4) {
cont += " <p class=\"detailSaying\">期终一次性还清本金和总利息</p>";
}
else if (v.BackType == 5) {
cont += " <p class=\"detailSaying\">按日计息，用多久付多少，方便灵活</p>";
}
cont += " </div>";
cont += " </li>";
}
})
}
val.RateDetailList = cont;
}
})
}
var content = template('productList', data); $(".proList-result").children().remove();
$(".proList-result").append(content);
注意其中的
var content = template('productList', data);
嗯，还是比较好用的。
http://blog.csdn.net/jiazimo/article/details/39232425
https://github.com/aui/art-template
artTemplate 模板使用的更多相关文章
- artTemplate模板引擎学习实战
在我的一篇关于智能搜索框异步加载数据的文章中,有博友给我留言,认为我手写字符串拼接效率过低,容易出错.在经过一段时间的摸索和学习之后,发现现在拼接字符串的方法都不在是自己去书写了,而是使用Javasc ...
- artTemplate模板引擎
artTemplate模板引擎 <li>索引 {{i + 1}} :{{value}}</li> {{/each}} </ul> </ ...
- 高性能前端 art-template 模板
官网: https://aui.github.io/art-template/zh-cn/index.html nodejs 服务器端使用 第一步: 引入 art-template 的包 npm in ...
- django的小操作，查询效率up， 引用art-template模板+djangorestframework
Part1: 提高查询效率newses = News.objects.select_related('category', 'author').get(id=1) # category和author字 ...
- thinkjs——art-template模板用法
前言: 概述之前先附上此正式版介绍地址:https://github.com/aui/artTemplate or http://www.jq22.com/jquery-info1097,可以再看下 ...
- ajax请求数据填充表格———使用art-template模板提高效率
一.为什么要用art-template模板 在实习的一次项目中,因为需求中展示表格的字段有很多个,后端返回的也是json数据,这时候如果还是使用之前的字符串拼接,这样会开发得比较慢,而且容易出错,而且 ...
- nodejs中引入art-template模板
使用Webstorm创建nodejs express应用时,默认使用的是jade或者ejs模板,对于不习惯这两种模板语法的人来说确实不是很方便.没关系,这里我们使用art-template模板引擎,使 ...
- koa art-template模板引擎的使用
art-template 模板引擎介绍 art-template 是一个简约.超快的模板引擎. 它采用作用域预声明的技术来优化模板渲染速度,从而获得接近 JavaScript 极限的运行 性能,并且同 ...
- Node学习之（第三章：art-template模板引擎的使用）
前言 大家之前都有使用过浏览器中js模板引擎,其实在Node.js中也可以使用模板引擎,最早使用模板引擎的概念是在服务端新起的. art-template art-template是一款高性能的Jav ...
- Express 中配置使用 art-template模板引擎
art-template 官网 https://aui.github.io/art-template/ 安装: npm install --save art-template npm install ...
随机推荐
- Ubuntu 12.04 部署 PostGIS 2.1
首先,卸载掉原有的postgis和postgresql-9.1-postgis,不然你就用1.5版好了~ 1 sudo dpkg --purge postgis postgresql-9.1-post ...
- java三方---->html解析jsoup的使用
jsoup 是一款 Java 的HTML 解析器,可直接解析某个URL地址.HTML文本内容.它提供了一套非常省力的API,可通过DOM,CSS以及类似于JQuery的操作方法来取出和操作数据.今天我 ...
- MQTT协议笔记之订阅
前言 记忆不太好的时候,只能翻看以前的文章/笔记重新温习一遍,但找不到MQTT协议有关订阅部分的描述,好不容易从Evernote中找到贴出来,这样整个MQTT协议笔记,就比较齐全了. SUBSCRIB ...
- Docker 使用指南 (三)—— 网络配置
版权声明:本文由田飞雨原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/95 来源:腾云阁 https://www.qclou ...
- Android Activity与Fragment生命周期 对应关系
- 在linux下安装wordpress
win下的简直傻瓜式操作:xampp打包一键安装 linux下的考虑到一些权限问题 还是有点蛋疼的 现在把流程贴出来做下记录: linux下安装xampp和wordpress的流程 ×由于linux下 ...
- jfinal关联查询给dto添加表结构以外的字段并返回的处理方式
官网栗子: http://www.jfinal.com/doc/5-10 5.10 表关联操作 JFinal ActiveRecord 天然支持表关联操作,并不需要学习新的东西,此为无招胜有招.表关联 ...
- Swift - 点击箭头旋转
let arrowImage = UIImageView(image: UIImage(named: "Machine_arrow")!.imageWithRenderingMod ...
- 模反元素 RSA Euler's totient function
https://baike.baidu.com/item/模反元素/20417595 如果两个正整数a和n互质,那么一定可以找到整数b,使得 ab-1 被n整除,或者说ab被n除的余数是1.这时,b就 ...
- sklearn学习笔记（一）——数据预处理 sklearn.preprocessing
https://blog.csdn.net/zhangyang10d/article/details/53418227 数据预处理 sklearn.preprocessing 标准化 (Standar ...