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. 项目发布之后 总提示有一个.DLL找不到或不匹配

    最近发布项目(.net,winform)总提示有一个.dll文件找不到或者不匹配 但是在本地调试是正常的 这个.dll,原来是从.net组件中引用到项目的,后来我将此.dll文件从网上下载,然后在项目 ...

  2. git format-patch的使用【转】

    本文转载自:http://blog.chinaunix.net/uid-28621021-id-3487102.html git format-patch的使用   1.在dev1分支上,打出所有de ...

  3. hdu1015 —— 回溯

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1015 因为之前看了下刘汝佳的<算法入门经典>,就用类似打印全排列,八皇后的方法做.本以为不 ...

  4. Discuz X3游客看小图功能导致文字内容隐藏的【修复方法】

    如果帖子内容以图片开始,并且开启了游客看小图功能,那么图片下面的文字也会被隐藏,这是不科学的(在图片上边的文字不会被隐藏)查看DZ源代码,发现是程序猿疏忽漏掉了</div> 下边1314学 ...

  5. html5--1.7超链接上

    html5--1.7超链接上 一.超链接的5种形式 <!DOCTYPE html> <html lang="en"> <head> <me ...

  6. 在Windows7 下 mingw32 开发环境中采用 glut3.7 学习 OpenGL

    2015年10月2日更新: 发现 freeglut 很好用兼容于 gut ,而且开源还在更新中.因此我觉得放弃以前的 glut 了,转而用 freeglut 了. 买了本<计算机图形学第4版&g ...

  7. 《java编程思想》：异常丢失

    finally子句的不恰当使用,会造成异常的丢失,此处列举两种典型的错误使用示例.编程中要避免这种情况 示例一: try{ throw new ExceptionA(); }finally{ thro ...

  8. oracle 11g 常用命令

    sqlplus system/123@ORCL; 查看oracle字符集: select * from nls_database_parameters where parameter ='NLS_CH ...

  9. 编写html页面时常见的问题（二）

    这次我接着说几个编写页面时常见的另外几个问题. 不能水平居中对齐 在我们写页面的时候,会遇到一些小细节就是不能水平居中对齐,这种情况影响了页面的美观,这也是写页面的质量不过关的一个体现,其实这种情况的 ...

  10. UOJ_14_【UER #1】DZY Loves Graph_并查集

    UOJ_14_[UER #1]DZY Loves Graph_并查集 题面:http://uoj.ac/problem/14 考虑只有前两个操作怎么做. 每次删除一定是从后往前删,并且被删的边如果不是 ...