Posts - 273,
Articles - 1,
Comments - 300
一只井底之蛙，你什么时候才能真正的向自己的脚下一点点的垫石头。而不是以为天下只有井口那么大。
08:09 by 沐海, ... 阅读,
一 ， 简单介绍
它是一个基于jQuery开发的javascript模板引擎。它主要的作用如下：
1. 通过JavaScript获取JSON形式的数据；
2. 获取一个HTML模板，与数据相结合，生成页面HTML。
&二 ， 快速上手
先来看一个简单的例子：
&script type="text/javascript" src="jquery-1.2.6.pack.js"&&/script&&script type="text/javascript" src="jquery-jtemplates.js"&&/script&
&script type="text/javascript"&&&$(document).ready(function() {&&&//初始化数据&&&var data = {&&&&name: '用户列表',&&&&list_id: '编号89757',&&&&table: [&&&&&{id: 1, name: 'Rain', age: 22, mail: },&&&&&{id: 2, name: '皮特', age: 24, mail: },&&&&&{id: 3, name: '卡卡', age: 20, mail: },&&&&&{id: 4, name: '戏戏', age: 26, mail: },&&&&&{id: 5, name: '一揪', age: 25, mail: }&&&&]&&&};&&&// 附上模板&&&$("#result1").setTemplateElement("template");&&&// 给模板加载数据&&&$("#result1").processTemplate(data);&&});&&/script&
&&!-- 模板内容 --&&&textarea id="template" style="display:none"&&&&strong&{$T.name} : {$T.list_id}&/strong&&&&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}&/td&&&&&/tr&&&&{#/for}&&&/table&&&/textarea&
&!-- 输出元素 --&&&div id="result1" &&/div&
上面代码中，先导入了jQuery.js，然后导入jtemplates.js。
接下来新建了一个data数据的json对象。
var data = {&&&& ......&&};
然后在HTMl页面上增加一个 输出元素& 和 一个模板元素:
最后在JS给输出元素 附加模板 和 数据。
这样，运行代码后，出现如下图所示界面。
& 三 ， 加载模板
& 这次把模板放到一个单独的页面中，而不是直接写在页面里。
新建一个template.html，放入以下代码：
&strong&{$T.name} : {$T.list_id}&/strong&&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}&/td&&&/tr&&{#/for}&/table&
然后新建一个json文件，名称为cs.json，代码如下：
{&name: "用户列表",&list_id: "编号89757",&&& table: [&&&&{id: 1, name: 'Rain', age: 22, mail: },&&&&{id: 2, name: '皮特', age: 24, mail: },&&&&{id: 3, name: '卡卡', age: 20, mail: },&&&&{id: 4, name: '戏戏', age: 26, mail: },&&&&{id: 5, name: '一揪', age: 25, mail: }&]}
在jQuery中，可以通过$.ajax()方法来加载 json文件，代码如下：
&script type="text/javascript"&$(function(){&$.ajax({&& & type:&&&&&& "post",&& & dataType:&& "json",&& & url:&&&&&&& "cs.json",& & success:&&& function(data){&&&&&&&&&&&&&&&&&&& .....&&&&&&&&&&&&&&& }&});});&/script&
在success回调函数里，首先需要设置模板，然后需要添加数据。如下代码所示：
&success:&&& function(data){
&&&&&&&&&&&&&&&&&&&// 设置模板&&&&&&&&&&&&&&&&&& & $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});&&&&&&&&&&&&&&&&&&&//&&加载数据&&&&&&&&&&&&&&&&&&& &$("#result1").processTemplate(data);&&&&&&&&&&&&&&& }&}
完整代码如下所示：
$(function(){&$.ajax({&& & type:&&&&&& "post",&& & dataType:&& "json",&& & url:&&&&&&& "cs.json",& & success:&&& function(data){&&&&&&&&&&&&&&&&&&& $("#result1").setTemplateURL("template.html?date="+(+new Date()), null, {filter_data: true});&&&&&&&&&&&&&&&&&&& $("#result1").processTemplate(data);&&&&&&&&&&&&&&& }&});});
运行代码后，也可以得到上图的界面。
关于 new Date().getTime()的简写方式：可以参考这篇文章：
CssRain提供的几个例子，按照官方写的：
jtemplates官方首页 :
官方的几个例子：1. Simple template (see source as description)2. Example 1 + multiple elements + parameters3. Example 1 (Valid XHTML 1.1 !)4. Multitemplate (Valid XHTML 1.1)
记录生活、工作、学习点滴！
欢迎大家讨论。沐海博客园，我有一颗，卓越的心！jquery插件jTemplates用法
jQuery的jTemplates插件实现了一种灵活的方式来控制显示，它允许我们定义好一个显示模板，jQuery在展现数据时根据选择的模板来动态生成。这就类似于ASP.NET中的ItemTemplate，也和XSLT有些类似。
jQuery官方网站给jTemplates的定义是：jTemplates is a template engine 100% in JavaScript.更多的信息可以参考
使用例子一如下：
1、导入jTemplates.js
&SCRIPT&type=&text/javascript&&src=&JS/jquery-jtemplates.js&&&/SCRIPT&
2、html中的代码：
&div&id=&jTemplatesTest&&&/div&
3、模板代码：
&&textarea&id=&template&&style=&display:none&&
你好:{$T.name},今天你{$T.age}岁了。
&/textarea&
4、JS数据：
var&profile={name:&龙猫&,age:&24&};
5.调用方法：
$(&#jTemplatesTest&).setTemplateElement(&template&);//template&指模板容器（这里是textarea）的ID；这里把template的innerHTML给了jTemplatesTest。也可以直接将&innerHtml传入，譬如：var&abc&=&& textarea&id=&template&&style=&display:none&&你好:{$T.name},今天你{$T.age}岁了。&/textarea&&；
$(&#jTemplatesTest&).setTemplateElement(abc);
$(&#jTemplatesTest&).processTemplate(profile);//让jTemplatesTest读取profile这个数据。
例子二循环输出：
var&data&=&[{age:1,name:'小A'},{age:2,name:'小B'},{age:3,name:'小C'},{age:4,name:'小D'},{age:5,name:'小E'}];
&textarea&id=&template&&style=&display:none&&
&&&&&&{#foreach&$T&as&record}
&&&&&&&&&你好:{$T.name},今天你{$T.record.age}岁了。&br&/&
&&&&&{#/for}
&/textarea&
&$(&#Panel&).setTemplateElement(&template&);
&$(&#Panel&).processTemplate(data);&
上一篇：下一篇：
留下脚印压缩包密码:sosuo8
loading...
申明:本站部分文章来自网络,由于各种原因对文章的来源无从考究,如果您是“
”的原作者，若侵犯您的版权,请与我联系!联系方法：email:&&QQ:
作者：龙猫
日期： 21:45:00
点击：loading...
网友投票(您觉得这篇文章怎样？)
请稍侯......
您可能感兴趣&&国之画&&&& &&
版权所有 京ICP备号-2
迷上了代码！jTemplates首页、文档和下载 - 其他jQuery插件 - 开源中国社区
当前访客身份：游客 [
当前位置：
jTemplates
jTemplates is a template engine 100% in JavaScript.Example of template:&table& {#foreach $T.table as row}& &tr&&& &td&{$T.row.name.bold()}&/td&&& &td&{$T.row.mail}&/td&& &/tr& {#/for}&/table&Download, demos, changelog, documentation are available on project homepage:
授权协议： 未知
操作系统：&&
收录时间： 日
so_co 发表于3年前
，最后回答(3年前)：
使用 jTemplates 中的任何问题
共有 971 个类似软件
jQuery Barcode 是一个用来创建条形码的 jQuery 插件。 在线演示...
Draggabilly 可帮你轻松实现网页上各种元素的拖放操作。支持 IE8+ 和多触摸。 示例...
Complexify 是一个用来检测密码强度的 jQuery 插件，并使用友好的效果来提示给用户...
JuiPlus插件可以让你很容易地增加漂亮的Javascript及Ajax界面元素到你的社交网络、...
jFontsize是一个轻量级的易于使用的jQuery插件，用于在页面上创建A+、A-这样的按钮...
jquery.qrcode.js 是一个能够在客户端生成矩阵二维码QRCode 的jquery插件 ，使用它...
Jquery-json 是 jQuery 的一个插件，可轻松实现对象和 JSON 字符串之间的转换。可序...
用了这个插件，用户访问你的网站就不用翻页啦!实际上它是预读了后续页的内容并将其...
jQuery Mousewheel Plugin是由Brandon Aaron开发的jQuery插件，用于添加跨浏览器的...
This plugin makes it simple to convert to and from JSON. Most people asked me...
共有 7 人关注 jTemplates<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
您的访问请求被拒绝 403 Forbidden - ITeye技术社区
您的访问请求被拒绝
亲爱的会员，您的IP地址所在网段被ITeye拒绝服务，这可能是以下两种情况导致：
一、您所在的网段内有网络爬虫大量抓取ITeye网页，为保证其他人流畅的访问ITeye，该网段被ITeye拒绝
二、您通过某个代理服务器访问ITeye网站，该代理服务器被网络爬虫利用，大量抓取ITeye网页
请您点击按钮解除封锁&