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 ...
随机推荐
- postgres模板数据库
CREATE DATABASE 实际上是通过拷贝一个现有的数据库进行工作的.缺省时,它拷贝名为 template1 的标准系统数据库.所以该数据库是创建新数据库的"模板".如果你给 ...
- LeetCode——Min Stack
Description: Design a stack that supports push, pop, top, and retrieving the minimum element in cons ...
- Java多线程详解(三)
1)死锁 两个线程相互等待对方释放同步监视器时会出现死锁的现象,这时所有的线程都处于阻塞状态,程序无法继续向下执行. 如下就是会出现死锁的程序. 首先flag = 1,线程d1开始执行,锁住对象o1, ...
- Linux下TCP延迟确认(Delayed Ack)机制导致的时延问题分析
版权声明:本文由潘安群原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/105 来源:腾云阁 https://www.qclo ...
- HTTP2.0简明笔记
版权声明:本文由史燕飞原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/82 来源:腾云阁https://www.qcloud ...
- Sublime Text 3配置Minify压缩,格式化css,js,html,json,svg
1.通过 Package Control 安装Minify 按 ctrl + shift + p 输入 Install Package 然后 输入Minify 按回车就可以安装啦 2.安装 ...
- PHP 允许Ajax跨域访问 (Access-Control-Allow-Origin)
Ajax访问php,报错 php顶部加上即可: header("Access-Control-Allow-Origin: *");
- python 多线程ping大量服务器在线情况
需要ping一个网段所有机器的在线情况,shell脚步运行时间太长,用python写个多线程ping吧,代码如下: #!/usr/bin/python #coding=utf-8 ''' Create ...
- Linux系统下JDK安装配置（转载）
转载出处:http://www.cnblogs.com/xuliangxing/p/7066913.html 本文主要介绍的是如何是Linux环境下安装JDK的,因为Linux环境下,很多时候也离不开 ...
- 2.06StuModify.aspx(修改姓名，性别，所在班级)
meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title ...