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. Linux学习之路（五）压缩命令

    常用压缩格式: .zip .gz .bz2 常用压缩格式: .tar.gz .tar.bz2 .zip格式压缩 .zip 压缩文件名 源文件 #压缩文件 .zip -r 压缩文件名 源目录 #压缩目录 ...

  2. 虚拟参考站（VRS）

    来源:https://www.sohu.com/a/149415053_391994 一.高精度定位 VRS是虚拟参考站(Virtual Reference Station)的简称.这项技术是CORS ...

  3. T57

    “期待使我产生了介于幸福与恐惧之间的激动”The anticipation produced in me a sensation somewhat between bliss and fear他猛一下 ...

  4. BZOJ_3935_Rbtree

    https://lydsy.com/JudgeOnline/problem.php?id=3935 分析: 如果知道更改后的状态,那么代价和是否合法都能求出来 对不合法的情况也设一个估价函数. 随机这 ...

  5. BZOJ_3124_[Sdoi2013]直径_树形DP

    BZOJ_3124_[Sdoi2013]直径_树形DP Description 小Q最近学习了一些图论知识.根据课本,有如下定义.树:无回路且连通的无向图,每条边都有正整数的权值来表示其长度.如果一棵 ...

  6. bzoj 3267: KC采花&&3272&&3638&&3502 线段树

    题目大意 给定一个长为n的序列,维护两种操作: 1.单点修改 2.在[l,r]这段区间中取k个互不相交的子段,使子段之和最大. \(n \leq 50000,k \leq 20\) 题解 四倍经验.( ...

  7. finetune

    微调的具体方法和技巧有很多种,这里总结了在不同场景下的微调技巧: 1)新数据集比较小且和原数据集相似.因为新数据集比较小(比如<5000),如果fine-tune可能会过拟合:又因为新旧数据集类 ...

  8. 无废话WCF系列教程 -- 李林峰

    李林峰的无废话WCF入门教程 无废话WCF入门教程一[什么是WCF] 无废话WCF入门教程二[WCF应用的通信过程] 无废话WCF入门教程三[WCF的宿主] 无废话WCF入门教程四[WCF的配置文件] ...

  9. jQuery之简单的表单验证

    html部分: <body> <form method="post" action=""> <div class="in ...

  10. css3 实现运动动画 圆与椭圆

    圆: html <div class="demo4"><div></div></div> css .demo4{ width: 20 ...