jquery jtemplates.js模板渲染引擎的详细用法第二篇

关于jtemplates.js的用法在第一篇中已经讲过了，这里就直接上代码，不同之处是绑定模板的方式，这里讲模板的数据专门写一个template.html的文件来展示

<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;

	}

	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 formatMail(mail){

	// 	result mail.replace(/@|\./g,'^_^');

	// 	// result "90";

	// }

	</script>

	<script type="text/javascript">

	$(function(){

		// 获取JSON数据并且赋值显示

		$.getJSON("./data/dataSource.json", function(data){

			// // 设置模板

			// $("#result").setTemplateURL("template.html");

			// // 给模板加载数据

			// $("#result").processTemplate(data);

			// setTemplateElement("id");  参数为页面中的一个元素ID

			// setTemplate("");  参数为具体的模板内容 $("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");

			// setTemplateURL("");  使用外部独立模板文件Url作为参数

			$("#result").setTemplateURL("template.html").processTemplate(data);

		});

	});

	</script>

</head>

<body>

	<div class="container">

		<div id="result"></div>

	</div>

</body>

</html></span>

　　模板文件如下：

<span style="font-family:Microsoft YaHei;font-size:14px;"><div><strong>部门编号：{$T.list_id}</strong></div>

<div><strong>负责人：{$T.name} </strong></div>

<div>

	<table>

		<tr>

			<th>编号</th>

			<th>姓名</th>

			<th>年龄</th>

			<th>邮箱</th>

		</tr>

		{#foreach $T.table as record}

		<tr>

			<td>{$T.record.id}</td>

			<td>{$T.record.name}</td>

			<td>{$T.record.age}</td>

			<td>{$T.record.mail.replace(/@|\./g,'^_^')}</td>

			<!-- <td>{formatMail($T.record.mail)}</td> -->

		</tr>

		{#/for}

         </table>

</div>

</span>

　　没错就是这样子，重点在于

<span style="font-family:Microsoft YaHei;font-size:14px;">$("#result").setTemplateURL("template.html").processTemplate(data);</span>

　　这句意思就是用id=“result”来承载结果，用template.html显示样式，processTemplate(data)用来处理数据到template.html上

这里的设置模板的方法有三种：

$("#result").setTemplateElement("template").processTemplate(data);

$("#result").setTemplateURL("template.html").processTemplate(data);

$("#result").setTemplate("").processTemplate(data);

官网原文如下：

// set templates
jQuery jQuery.fn.setTemplate(String template, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplate(Template template);
jQuery jQuery.fn.setTemplateURL(String url, [Array includes], [Object settings]);
jQuery jQuery.fn.setTemplateElement(String elementName, [Array includes], [Object settings]);

jquery jtemplates.js模板渲染引擎的详细用法第二篇的更多相关文章

  1. jquery jtemplates.js模板渲染引擎的详细用法第一篇

    jquery jtemplates.js模板渲染引擎的详细用法第一篇 Author:ching Date:2016-06-29 jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了 ...

  2. jquery jtemplates.js模板渲染引擎的详细用法第三篇

    jquery jtemplates.js模板渲染引擎的详细用法第三篇 <span style="font-family:Microsoft YaHei;font-size:14px;& ...

  3. template.js 数据渲染引擎

    template.js 数据渲染引擎 template.js是一款JavaScript模板引擎,用来渲染页面的. 原理:提前将Html代码放进编写模板 <script id="tpl& ...

  4. jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript&quo ...

  5. jquery.tmpl.js 模板引擎用法

    1.0 引入: <script src="/js/jquery.tmpl.min.js"></script> 2.0 模板: <script type ...

  6. nunjucks.js模板渲染

    直接用 script 引入文件: <script src="nunjucks.js"></script> 是使用 render 来直接渲染文件,这种方式支持 ...

  7. Html模板渲染引擎Hogan

    Github:https://github.com/twitter/hogan.js 最简单的使用教程:http://www.imooc.com/article/18493

  8. spring Boot+spring Cloud实现微服务详细教程第二篇

    上一篇文章已经说明了一下,关于spring boot创建maven项目的简单步骤,相信很多熟悉Maven+Eclipse作为开发常用工具的朋友们都一目了然,这篇文章主要讲解一下,构建spring bo ...

  9. (4)Flask项目模板渲染初体验

    一.准备静态资源 将项目使用到的静态资源拷贝到static目录 二.创建前台首页html 创建templates/home/home.html页面,内容包含导航和底部版权两部分,中间内容区域为模板标签 ...

随机推荐

  1. 20145239杜文超 《Java程序设计》第4周学习总结

    20145239 <Java程序设计>第4周学习总结 教材学习内容总结 第六章: 继承:避免多个类间重复定义共同行为.即当多个类中存在相同属性和行为时,将这些内容抽取到单独一个类中,那么多 ...

  2. gcc error - "iostream: No such file or directory"

    #include <iostream> using namespace std; int main(void) { cout<<"Hello World!\n&quo ...

  3. Redis- 内存数据库Redis之安装部署

    内存数据库Redis之安装部署 Redis是一款非关系型,key-value存储的内存数据库,Redis数据库完全在内存中,使用磁盘仅用于持久性.Redis的速度非常快,每秒能执行约11万集合,每秒约 ...

  4. matlab之text()函数

    text()函数用来给图加上说明性文字. 格式:text(x,y,'txt') 或者:text(x,y,'txt','color','k') x,y是位置 txt是说明文字,如果说明性文字是数字,则这 ...

  5. BZOJ 1626 [Usaco2007 Dec]Building Roads 修建道路：kruskal（最小生成树）

    题目链接:http://www.lydsy.com/JudgeOnline/problem.php?id=1626 题意: 有n个农场,坐标为(x[i],y[i]). 有m条原先就修好的路,连接农场( ...

  6. 基于深度学习的目标检测算法：SSD——常见的目标检测算法

    from:https://blog.csdn.net/u013989576/article/details/73439202 问题引入: 目前,常见的目标检测算法,如Faster R-CNN,存在着速 ...

  7. Struts2与ServletAPI解耦

    什么是与Servlet API解耦? 为了避免与servlet API耦合在一起,方便Action做单元测试, Struts2对HttpServletRequest,HttpSession,和Serv ...

  8. asteris录音设置

    [macro-recording] exten =>s,1,Set(CALLFILENAME=${STRFTIME(${EPOCH},UTC-8,%Y-%m-%d-%H-%M-%S)}-${CA ...

  9. BZOJ_3529_[Sdoi2014]数表_莫比乌斯反演+树状数组

    Description 有一张 n×m 的数表,其第 i 行第 j 列(1 <= i <= n, 1 <= j <= m)的数值为 能同时整除 i 和 j 的所有自然数之和.给 ...

  10. 【LeetCode】062. Unique Paths

    题目: A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). ...