适应laytpl 渲染模板数据
前言
当我们异步读取数据过来的时候,还要通过手动赋值,显示在页面上吗,那样你就太OUT了,哥告诉你个新方式。
那就是 laytpl 插件
用法一:渲染单条数据
<table id="Box">
<tr>
<td>姓名</td><td>性别</td><td>班级</td><td>分数</td>
</tr>
</table>
<input type="button" value="添加学生分数" onclick="UseInfo1()"/>
<script type="text/html" id="box-class-tem1">
<tr>
<td>{{d.Name}}</td><td>{{d.Sex}}</td><td>{{d.Class}}</td><td>{{d.Core}}</td>
</tr>
</script> function UseInfo1() {
var html = $("#box-class-tem1").html(); //获取模板
/*单条数据*/
var ojb = {
Name: "肚子",
Sex: "14",
Class: "五年级",
Core: "99"
};
laytpl(html).render(ojb, function (result) {
$("#Box").append(result);
});
}
用法二:渲染多条数据
<table id="Box">
<tr>
<td>姓名</td><td>性别</td><td>班级</td><td>分数</td>
</tr>
</table>
<input type="button" value="批量添加学生分数" onclick="UseInfo2()"/> <script type="text/html" id="box-class-tem2">
{{# for(var i = 0; i < d.list.length; i++){ }}
<tr>
<td>{{d.list[i].Name}}</td><td>{{d.list[i].Sex}}</td><td>{{d.list[i].Class}}</td><td>{{d.list[i].Core}}</td>
</tr>
{{# } }}
</script> function UseInfo2() {
var html = $("#box-class-tem2").html(); //获取模板
/*多条数据*/
var data = {
list: [{
Name: "肚1",
Sex: "14",
Class: "五年级",
Core: "99"
},
{
Name: "肚2",
Sex: "14",
Class: "五年级",
Core: "99"
}
]
};
laytpl(html).render(data, function (result) {
$("#Box").append(result);//异步渲染数据
});
}
常用的方法应该就这两种,有不详细的地方,可以参考官方解释。谢谢
适应laytpl 渲染模板数据的更多相关文章
- 基于JS正则实现模板数据动态渲染
最近业务上需要动态渲染模板数据: 一.业务需求: 1.前端后端定义好模板以及变量名,根据打印机类型转换成对应sdk需要的标签模板,保存数据库 2.订单数据是前端根据支付结果获取的,最终渲染完的数据模板 ...
- laytpl js模板引擎
laytpl js模板引擎.laytpl是一款非常轻量的JavaScript模板引擎.地址:http://www.layui.com/laytpl/ 用法与handlebar.js类似,但是比较轻量级 ...
- HTML5触屏版多线程渲染模板技术分享
前言: 了解js编译原理的屌丝们都知道,js是单线程的,想当年各路神仙为了实现js的多线程,为了解决innerHTML输出大段HTML卡页面的顽疾,纷纷设计了诸如假冒的“多线程“实现,我自己也在写开源 ...
- 10_常见的get和post请求_路由器_ejs服务器渲染模板引擎
1. 常见的 get 和 post 请求有哪些? 常见的发送 get 请求方式: 在浏览器地址栏输入 url 地址访问 所有的标签默认发送的是 get 请求:如 script link img a f ...
- JsRender 前端渲染模板基础学习
JsRender前端渲染模板 使用模板,可以预先自定义一些固定格式的HTML标签,在需要显示数据时,再传入真实数据组装并展示在Web页中:避免了在JS中通过“+”等手动分割.连接字符串的复杂过程:针对 ...
- flask模板的基本用法(定界符、模板语法、渲染模板),模板辅助工具(上下文、全局对象、过滤器、测试器、模板环境对象)
flask模板 在动态web程序中,视图函数返回的HTML数据往往需要根据相应的变量(比如查询参数)动态生成. 当HTML代码保存到单独的文件中时,我们没法再使用字符串格式化或拼接字符串的当时在HTM ...
- 云平台项目--学习经验--jsrender前端渲染模板
jsrender的好处:可以预先自定义一些固定的html标签,在需要显示数据的时候,可以直接传入真实的数据并显示在web页面中,避免了Js编写中的复杂过程:针对高性能和纯字符串渲染并优化,不需要依赖D ...
- JsRender 前端渲染模板常用API学习
JsRender 常用API 1. $.templates() $.templates()方法是用来注册或编译模板的,使用的情况有以下几种. 把html字符串编译编译成模板 获取使用script标签声 ...
- 前端渲染模板(一):Thymeleaf
一.使用 本篇文章将以SpringBoot为框架来介绍Thymeleaf的用法. 1 资源文件的约定目录结构 Maven的资源文件目录:/src/java/resources spring-boot ...
随机推荐
- python smtplib email
监控系统需要触发报警邮件, 简单笔记一下的用到的库. smtplib class smtplib.SMTP([host[, port[, local_hostname[, timeout]]]]) 返 ...
- 导入excel数据到数据库
1.上传excel到服务器 jsp页面代码 <form action="actionname" method="post" id="form1& ...
- JS中多种方式创建对象
1.内置对象创建 var girl=new Object(); girl.name='hxl'; console.log(typeof girl); 2.工厂模式,寄生构造函数模式 function ...
- EXPORT_SYMBOL的使用
转自:http://blog.csdn.net/cailiwei712/article/details/7998525 在查看内核驱动代码的时候会经常看到在一些函数后面总会跟EXPORT_SYMBOL ...
- sybase 收集常用sql语句
-------创建sybase设备 语句--------- disk init name="DEV_DB_CLIENT_DAT26", physname="F:\syba ...
- 【leetcode】Climbing Stairs
题目简述: You are climbing a stair case. It takes n steps to reach to the top. Each time you can either ...
- 常见开发需求之angular上拉加载更多
需求 移动端使用angular实现上拉加载更多的条目,这个需求比较常见,网上的插件改动起来比较麻烦,不如自己写一个最适合,以前有同事写了一个,奈何bug太多,后来改分页了,我们产品说什么都让做,没 ...
- SpringMVC 常用注解(1)
/** * @RequestMapping 除了修饰方法 还可以修饰类 * 1).类定义处:提供初步的请求映射信息,相当于WEB应用的根目录 * 2).方法定义处,提供进一步的细分映射信息,相对 ...
- java基础-泛型2
浏览以下内容前,请点击并阅读 声明 6 类型推测 java编译器能够检查所有的方法调用和对应的声明来决定类型的实参,即类型推测,类型的推测算法推测满足所有参数的最具体类型,如下例所示: //泛型方法的 ...
- centos yum安装saltstack
1.导入安装源 centos5 rpm -Uvh http://ftp.linux.ncsu.edu/pub/epel/5/x86_64/epel-release-5-4.noarch.rpm cen ...