template.js的用法
1、template.js模板引擎
2、使用
a、不循环
模板:
<script id="card_pay_tpl" type="text/html"><div class="cell-item"><div class="cell-left">订单编号:</div><div class="cell-right"><input class="cell-input" type="text" value="{{data.card_sn}}" placeholder=""></div></div><div class="cell-item"><div class="cell-left">面额:</div><div class="cell-right"><input class="cell-input" type="text" value="{{data.denomination}}元" placeholder=""></div></div><div class="cell-item"><div class="cell-left">售价:</div><div class="cell-right"><input class="cell-input" type="text" value="{{data.price}}元" placeholder=""></div></div> </script>
调用
if (res.code == 200) {var _data = res;var html = template('card_pay_tpl', _data);$('元素').html(html);} else {alert("出问题啦");}
b、循环
模板:
<script id="comment_tpl" type="text/html">{{each data as data}}<li class="border_b"><p class="commont_tip cl"><span class="fl font-14">{{data.user_name}}</span><span class="fl star_grace star_{{data.star}}"></span><span class="fr c999 font-12">{{data.add_time}}</span></p><p class="commont_detail">{{data.content}}</p></li>{{/each}} </script>
调用:
if (res.code == 200) {var html = template('comment_tpl', res);$('.commont_list').html(html);} else {YDUI.dialog.toast('已退出!', 'none', 1000);}
c、筛选条件:
模板:
<span>{{data.booking_date | dateFormat:data.booking_date}}</span>
筛选条件:
/*时间戳*/template.helper('dateFormat', function (timestamp) {var date = new Date(timestamp * 1000); //时间戳为10位需*1000,时间戳为13位的话不需乘1000Y = date.getFullYear() + '-';M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';D = date.getDate() + ' ';return Y + M + D;});
d、输出html内容
模板:
使用#
<span>{{#data.booking_date | dateFormat:data.booking_date}}</span>
e、直接在行内写判断
<tr class="text-center {{data.type?'':'hide'}}" id="row_{{data.id}}">
转载于:https://www.cnblogs.com/congfeicong/p/8892765.html
template.js的用法相关推荐
- 出位的template.js 基于jquery的模板渲染插件,简单、好用
找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一 ...
- JavaScript模板引擎Template.js使用
文章主要为大家详细介绍了JavaScript模板引擎Template.js使用方法.template.js 一款 JavaScript 模板引擎,简单,好用.提供一套模板语法,用户可以写一个模板区块, ...
- html jquery 模板引擎,jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- Javascript模块化编程require.js的用法
JS模块化工具requirejs教程(一):初识requirejs http://www.runoob.com/w3cnote/requirejs-tutorial-1.html JS模块化工具req ...
- Moment.js常见用法总结
From: https://www.jianshu.com/p/9c10543420de Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中 ...
- jquery template.js前端模板引擎
作为现代应用,ajax的大量使用,使得前端工程师们日常的开发少不了拼装模板,渲染模板 在刚有web的时候,前端与后端的交互,非常直白,浏览器端发出URL,后端返回一张拼好了的HTML串.浏览器对其进行 ...
- artTemplate/template.js模板将时间戳格式化为正常的日期
1:引用<script type="text/javascript" src="../js/artTemplate/template.js">< ...
- Moment.js常见用法总结 1
Moment.js常见用法总结 Moment.js是一个轻量级的JavaScript时间库,它方便了日常开发中对时间的操作,提高了开发效率. 日常开发中,通常会对时间进行下面这几个操作:比如获取时 ...
- JavaScript模板引擎Template.js基本使用详解
template.js是一款JavaScript模板引擎,提供一套模板语法,简单好用,开发者可以写一个模板区块,每次传入的数据,生成对应数据产生的HTML片段,渲染不同的效果.官网:简洁语法版 htt ...
最新文章
- PC上安装MAC X Lion
- linux fedor 安装 gcc,fedora中如何安装gccsense
- 1024我摊牌了,谈谈自己2020剩余两月的学习计划
- iOS-- pod常用命令
- 牛客 - tokitsukaze and Inverse Number(树状数组+逆序对定理)
- Spring Boot 最佳实践(一)快速入门
- LeetCode 453. Minimum Moves to Equal Array Elements
- 北京冬奥会闭幕 冰墩墩概念股怎么样了?
- java接口自动化(一) - 接口自动化测试整体认知 - 开山篇(超详解)
- Zenlayer完成近亿元A轮融资,欲构建全球连接服务平台
- 看懂这个故事,轻松实现从技术到管理的华丽转身!
- Windows11 安装 WSA 简单上手一试
- 【工具】-13UML泳道图
- 华为路由器AAA配置与管理
- spring boot 2.0 官方文档 (一)
- C7N新增,保存,删除基础模板
- php 获取array的长度_php中获取数组长度的方法
- 写到最前面的话——研究生毕业论文致谢
- Soul网关Hystrix插件相关知识点扫盲
- c语言 标准多线程库,关于C语言多线程pthread库的功能描述
热门文章
- 蓝桥杯 ADV-194 算法提高 盾神与积木游戏 java版
- string转int/float/double、int/float/double转string、转字符串数组的方法:stoi、stringstream、scanf、to_string、sprintf
- 学霸的迷宫-蓝桥杯算法提高-广搜 bfs 经典问题
- WebLogic配置JNDI数据源
- Linq 三表 left join 的实现
- 大陆集团:放弃内燃机,适用于高阶自动驾驶MK C1制动系统2020年国内投产
- 通俗易懂的生产环境Web应用架构介绍
- mysql之delete删除记录后数据库大小不变
- ScrollView详解
- 命令行运行postman