jTemplates是javascript的模板引擎,基于jquery的插件

转载 2012年03月29日 00:22:05
推荐好用的Jquery模板插件jTemplates

jTemplates是javascript的模板引擎,基于jquery的插件。官方网址:http://jtemplates.tpython.com/

数据准备:

var data ={
TotalCount:64,
Lists:[
{Id:'2001' ,Title:'新闻11',CreateDate:'2011-08-08'},
{Id:'2002' ,Title:'新闻22',CreateDate:'2011-08-08'},
{Id:'2003' ,Title:'新闻33',CreateDate:'2011-08-08'},
{Id:'2004' ,Title:'新闻44',CreateDate:'2011-08-08'},
{Id:'2005' ,Title:'新闻55',CreateDate:'2011-08-08'},
]
}

1、引入库文件

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery-jtemplates.js"></script>


2、编写模板

<div id="result"></div>
<div id="templateContainer" style="display:none;">
<table>
<tr><td>Id</td><td>标题</td><td>发布时间</td></tr>
{#foreach $T.table as row}
<tr><td>{$T.row.Id}</td><td>{$T.row.Title}</td><td>{$T.row.CreateDate}</td></tr>
{#/for}
</table>
</div>
语法:

1、大括号{..} ,在这里面可以写任何javascript的代码,比如 {$T.toUpperCase()}
2、{$T} : 表示数据,例如上面的例子,$T.table表示得到data的table对象,$T.TotalCount 为 64。
3、{#foreach} : 循环获取数据,如上面:{#foreach $T.table as row}      {$T.row.Title}      {/for}  
扩展语法:

{#if}

例子:
{#if $T=="true"} good {#else} fail {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

{#foreach}
{#foreach |VAR| as |NAME| [begin=|CODE|] [count=|CODE|] [step=|CODE|]}..{#else}..{#/for}

例子:
a、输出所有数据:
{#foreach $T.table as row}      {$T.row.Title}      {/for}   

b、从第二条记录开始输出:
{#foreach $T.table as row begin=1}      {$T.row.Title}      {/for}   

c、从第二条开始且只取2条
{#foreach $T.table as row begin=1 count=2}      {$T.row.Title}      {/for}   

d、使用step
{#foreach $T.table as row step=2}      {$T.row.Title}      {/for} 
e、使用else

{#foreach $T.table as row step=2}      {$T.row.Title}  {#else}   无记录   {/for} 

{#for}

例子:

{#for index = 1 to 10} {$T.index} {#/for}
{#for index = 1 to 10 step=3} {$T.index} {#/for}



3、渲染模板并展示


<script type="text/javascript"> 
		$(document).ready(function() {
			// 设置模板
			$("#result").setTemplateElement("templateContainer");
			
			// 处理模板
			$("#result").processTemplate(data);
		});	
	</script> 

设置模板的几种方法:
a. setTemplateElement:参数为页面中的一个元素ID
如上面的例子
b. setTemplate: 参数为具体的模板内容,
如:$("#result").setTemplate("Template by {$T.bold()} version <em>{$Q.version}</em>.");
c.setTemplateURL:使用外部独立模板文件Url作为参数
如:$("#result").setTemplateURL("example_multitemplate1.tpl");

4、运行结果:

完整代码
<html> 
<head> 

    <script type="text/javascript" src="jquery.js"></script>

    <script type="text/javascript" src="jquery-jtemplates.js"></script>

    <title>jTemplates</title>

    <script type="text/javascript"> 
        var data ={
                TotalCount:64,
                Lists:[
                    {Id:'2001' ,Title:'新闻11',CreateDate:'2011-08-08'},
                    {Id:'2002' ,Title:'新闻22',CreateDate:'2011-08-08'},
                    {Id:'2003' ,Title:'新闻33',CreateDate:'2011-08-08'},
                    {Id:'2004' ,Title:'新闻44',CreateDate:'2011-08-08'},
                    {Id:'2005' ,Title:'新闻55',CreateDate:'2011-08-08'},
                ]
        };
		$(document).ready(function() {
			// 设置模板
			$("#result").setTemplateElement("templateContainer");
			
			// 处理模板
			$("#result").processTemplate(data);
		});	
    </script>

</head>
<body>
    <div id="result">
    </div>
    <textarea id="templateContainer" style="display: none;">
        <table border="1">
            <tr>
                <td>
                    Id
                </td>
                <td>
                    标题
                </td>
                <td>
                    发布时间
                </td>
            </tr>
            {#foreach $T.Lists as row}
            <tr>
                <td>
                    {$T.row.Id}
                </td>
                <td>
                    {$T.row.Title}
                </td>
                <td>
                    {$T.row.CreateDate}
                </td>
            </tr>
            {#/for}
        </table>
    </textarea>
</body>
</html>

Jtemplates 基本语法

jTemplates是一个基于JQuery的模板引擎插件,功能强大,有了他你就再不用为使用JS绑定数据集时发愁了。 首先送上jTtemplates的官网地址:http://jtemplates.t...
  • kuyuyingzi
  • kuyuyingzi
  • 2014年08月02日 21:39
  • 7093

JS模板引擎jTemplates使用笔记详解

1、要使用jtemplate首先要引入两个js脚本文件: 需要注意的是,jtemplate是在jquery的基础上实现的,所以脚本的引入顺序不能颠倒,否则会报错 2、. 然后建...
  • zhuifengshenku
  • zhuifengshenku
  • 2014年07月27日 09:03
  • 5995

JavaScript学习总结(四)——jQuery插件开发与发布

jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用,...
  • zhangguo5
  • zhangguo5
  • 2017年03月16日 15:06
  • 1754

jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传

jQuery ajax + ajaxfileupload.js插件 实现无刷新文件上传
  • huwei2003
  • huwei2003
  • 2016年06月04日 18:30
  • 1384

jquery jtemplates.js模板渲染引擎的详细用法第二篇

jquery jtemplates.js模板渲染引擎的详细用法第二篇 关于jtemplates.js的用法在第一篇中已经讲过了,这里就直接上代码,不同之处是绑定模板的方式,这里讲模板的数据专...
  • chenhongwu666
  • chenhongwu666
  • 2016年08月28日 00:14
  • 2218

jquery模板插件jTemplates代替拼html

jQuery的jTemplates插件允许定义一个显示模板,在展现数据时根据选择的模板来动态生成。 jQuery的jTemplates官方网站:http://jtemplates.tpython.c...
  • gdjlc
  • gdjlc
  • 2013年01月07日 23:30
  • 8523

2017年最好的JavaScript插件

JavaScript库是一个令人难以置信的有用的工具,任何设计师或开发人员都熟悉。他们可以为您的网站添加一些超强功能,或者增加设计,为您的用户带来更好的体验。...
  • QQ80583600
  • QQ80583600
  • 2017年03月13日 21:56
  • 897

jQuery插件:表单Email常用邮箱选择控件

jQuery插件:表单Email常用邮箱选择控件先上截图:用法: $(selector).emailSelector(emailType); //emailType(可选),是一个数组,...
  • peakchen_90
  • peakchen_90
  • 2016年10月30日 02:14
  • 1410

jQuery wizard,一款创建步骤向导的插件

这篇文章完全没有技术难度,但我为什么要写呢?因为我想把这么好的一款插件推荐给需要的小伙伴。因为在我遇到这款插件之前,一直没有找到合适的(step-by-step wizards)创建步骤向导的插件。...
  • qing_gee
  • qing_gee
  • 2017年07月10日 15:58
  • 2600

重写jquery.confirm.js 摆脱传统alert confirm 插件供下载(一)

这是一个伟大的插件,虽然200行代码不到,而且bug很多,但是我真的很用心去写了啊。...
  • aphy358
  • aphy358
  • 2015年11月06日 23:31
  • 3757
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jTemplates是javascript的模板引擎,基于jquery的插件
举报原因:
原因补充:

(最多只允许输入30个字)