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. 监听输入框变化（oninput,onpropertychange,onchange）

    oninput,onpropertychange,onchange: oninput是onpropertychange的非IE浏览器版本,支持firefox和opera等浏览器,但有一点不同,它绑定于 ...

  2. swift的arc 是不是有问题?

    class Arctest { let name: String = "Arctest" @lazy var ret:() -> String? = { [weak self ...

  3. linux进程学习笔记

    学习了linux下的进程,觉得应该整理一下,忘得差不多了,顺便回顾一下. 学而时习之,不亦说乎~~ 进程笔记 ,什么是进程? The Single UNIX Specification, Versio ...

  4. boost库安装和使用

    1. 下载最新的boost库:http://www.boost.org/本文使用的是boost_1_66_0.tar.gz, 2. Boost库安装步骤: > 解压下载文件,例如下载文件在~/D ...

  5. select查询语句执行顺序

    查询中用到的关键词主要包含六个,并且他们的顺序依次为select--from--where--group by--having--order by其中select和from是必须的,其他关键词是可选的 ...

  6. MMU的理解

    MMU内存管理单元相关知识点总结 1.MMU是Memory Management Unit的缩写,中文名是内存管理单元,它是中央处理器(CPU)中用来管理虚拟存储器.物理存储器的控制线路,同时也负责虚 ...

  7. Python list的定义和删改

    需要用到list.取回参数 .  sys.argv返回的是个元组. 最后发现用for循环好像没用. a=0 for i in sys.argv[1:]: qh[a]=sys.argv[a] a=a+1 ...

  8. python3 + selenium + eclipse 中报：Unable to find a matching set of capabilities

    在环境python3 + selenium + eclipse 运行报错::Unable to find a matching set of capabilities 解决办法:Update Fire ...

  9. Python中的getattr()函数详解

    最近看Dive into python第四章自省中提到getattr()函数,作为一个内建函数平时自己没怎么用过所以也不太理解这个函数的一些用法 看了下函数本身的doc getattr(object, ...

  10. mongodb启动脚本

    #!/bin/sh # #chkconfig: #description: mongodb start() { /usr/local/yunshipei/enterplorer/mongodb/bin ...