jquery jtemplates.js模板渲染引擎的详细用法第三篇
jquery jtemplates.js模板渲染引擎的详细用法第三篇
<span style="font-family:Microsoft YaHei;font-size:14px;"><!doctype html> <html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery - jTemplates</title>
<!-- <link rel="stylesheet" type="text/css" href="./css/style.css"> -->
<script type="text/javascript" src="./js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="./js/jquery-jtemplates.min.js"></script>
<style type="text/css">
.container{
width: 1000px;
height: 600px;
margin: 0 auto;
}
.template{
display: none;
}
table{
background-color: #fff;
}
table tr th{
padding: 8px;
border-bottom: 1px solid #eee;
}
table tr td{
padding: 10px;
border-bottom: 1px solid #eee;
}
</style>
<script type="text/javascript">
$(function(){
// 初始化JSON数据
// 通过getJSON方法加载
// $.getJSON("./data/dataSource1.json", function(data){
// // 设置模板
// $("#result").setTemplateElement("template");
// // 给模板加载数据
// $("#result").processTemplate(data);
// }); // 通过ajax方法加载
$.ajax({
type:"post",
dataType:"json",
url:"./data/dataSource1.json",
success:function(data){
// alert(data);
// 设置模板
$("#result").setTemplateElement("template");
// 给模板加载数据
$("#result").processTemplate(data);
},
error:function(error){
alert("error:" + error.responseText);
}
});
});
</script>
</head>
<body>
<div class="container">
<div><h1>标题</h1></div>
<div id="result"></div>
<textarea id="template" class="template">
{#template MAIN}
<table>
<tr>
<td>Id</td>
<td>标题</td>
<td>发布时间</td>
</tr>
{#foreach $T.Lists as r}
{#include ROW root=$T.r}
{#/for}
</table>
{#/template MAIN} {#template ROW}
<tr>
<td>{$T.Id}</td>
<td>{$T.Title}</td>
<td>{$T.CreateDate}</td>
</tr>
{#/template ROW}
</textarea>
</div>
</body>
</html></span>
这个是一个例子
jquery jtemplates.js模板渲染引擎的详细用法第三篇的更多相关文章
- jquery jtemplates.js模板渲染引擎的详细用法第二篇
jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专门写一个t ...
- jquery jtemplates.js模板渲染引擎的详细用法第一篇
jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...
- template.js 数据渲染引擎
template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...
- jquery validate.js表单验证的基本用法入门
这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...
- jquery.tmpl.js 模板引擎用法
1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...
- nunjucks.js模板渲染
直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...
- Html模板渲染引擎Hogan
Github:https://github.com/twitter/hogan.js 最简单的使用教程:http://www.imooc.com/article/18493
- AI (Adobe Illustrator)详细用法(三)
本文主要是介绍和色彩相关的用法. 一.路径外观设置 1.设置描边粗细 手动输入20px 下拉选择 鼠标选中数值,按向上或向下的箭头调整 在右边的描边菜单中修改 Note:按住shift键,然后上下箭头 ...
- (4)Flask项目模板渲染初体验
一.准备静态资源 将项目使用到的静态资源拷贝到static目录 二.创建前台首页html 创建templates/home/home.html页面,内容包含导航和底部版权两部分,中间内容区域为模板标签 ...
随机推荐
- mini2440 uboot烧写uImage
mini2440下烧写u-boot后,就可以用u-boot烧写linux内核了. 安装mkimage工具: apt-get install u-boot-tools 解压缩官方mini2440 lin ...
- 深入浅出理解linux inode结构【转】
本文转载自:https://blog.csdn.net/fantasyhujian/article/details/9151615 一.inode是什么? 参考文档:http://tech.diann ...
- android 电池(一):锂电池基本原理篇【转】
本文转载自:http://blog.csdn.net/xubin341719/article/details/8497830 关键词:Android 电池关机充电 androidboot.mode ...
- NMEA码详解【转】
本文转载自:http://m.2cto.com/kf/201610/556695.html GPS数据遵循NMEA-0183协议,该数据标准是由NMEA(National Marine Electro ...
- npm使用淘宝镜像安装包
npm使用registry这个属性指定仓库,因此配置这个属性即可.修改npm配置属性的几种方法详见官方文档. 这里只贴出修改registry的方法,以下三种任意一种即可: 修改~/.npmrc文件(没 ...
- jQuery 中的常用函数
on() : 方法在被选元素及子元素上添加一个或多个事件处理程序.自1.7 版本起,on()方法是 bind(),live() 和 delegate()方法的替代品 语法: $(selector).o ...
- CI框架上传csv文件
今天遇到在用CI框架上传csv文件时报错问题: The filetype you are attempting to upload is not allowed. 是类型不允许,想到CI框架的conf ...
- Win7 下安装MongoDB
1).下载MongoDBhttp://downloads.mongodb.org/win32/mongodb-win32-i386-2.4.5.zip 下载Windows 32-bit版本并解压缩,程 ...
- legend2---开发日志15(功能需求明确,设计好类和结构的好处是)
legend2---开发日志15(功能需求明确,设计好类和结构的好处是) 一.总结 一句话总结: 极快简化编程,节约大量时间 1.多个类型的物品,比如商店和寻宝的丹药,装备,特性书,英雄石等等 应该怎 ...
- chrome浏览器常用快捷键
chrome浏览器常用快捷键 一.总结 一句话总结: Ctrl + j:打开“下载内容”页 Ctrl + t:打开新的标签页,并跳转到该标签页 Ctrl + d:将当前网页保存为书签 1.在新标签页中 ...