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. jQuery/CSS3实现Android Dock效果

    在线演示 本地下载

  2. 草原psd素材

    草原PSD素材,草原,风景,蓝天白云,飞鸟,阳光,绿色,草地. http://www.huiyi8.com/caoyuan/psd/

  3. storm源码剖析（1）：storm脚本

    今天看了一下storm的命令行脚本${STORM_HOME}/bin/storm,现在将剖析过程整理一下,作为记录.注:使用的storm版本为0.8.0. ${STORM_HOME}/bin/stor ...

  4. bzoj 4275 Badania naukowe —— DP

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4275 枚举 \( C \) 在 \( A \) 和 \( B \) 中的位置,然后取它前后的 ...

  5. boost::function 通过boost::bind调用类成员函数

    1. 首先引用boost::function和boost::bind的头文件和库: #include "boost/bind.hpp" #include "boost/f ...

  6. 修改eclipse中的propersties文件的默认编码格式

    最近遇到每次新建工程里无论在总得工程设置了utf-8还是刚刚建立的空间设置都没有效果, 原来properties文件的设置要单独弄,如下图所示

  7. java 对象锁和类锁的区别（转）

    java 对象锁和类锁的区别   转自; ) ); ; ) ); 上述的代码,第一个方法时用了同步代码块的方式进行同步,传入的对象实例是this,表明是当前对象,当然,如果需要同步其他对象实例,也不可 ...

  8. iView之select获取value和label

    使用:label-in-value="true" @on-change="obtainValue" 详见官方文档:https://www.iviewui.com ...

  9. Process打开文件

    引用:using System.Diagnostics; 打开文件夹: System.Diagnostics.Process.Start(FilePath); 打开文件夹中某个文件: System.D ...

  10. 关于SetTimer间隔小于OmTimer执行时间的问题

    如果SetTimer的时间间隔为t,其响应事件OnTimer代码执行一遍的时间为T,且T>t.这样,一次未执行完毕,下一次定时到,这时候程序会如何执行? 可能的情况:1.丢弃还未执行的代码,开始 ...