jtemplate 为javascript前端html模版引擎

最近的项目中用到了jtemplate, 它是客户端基于javascript的模板引擎，绑定的数据为json对象。以前我在页面上显示数据列表时最喜欢用Repeater控件了，因为它相对与其它几个服务端控件是最轻量级了，而且布局也最灵活，不过它终究是服务端控件在性能上是有损失的，对于性能要求很高的站点，连它也不让用，那么开发人员通常的做法是在服务端把html代码生成好再一次性输出到客户端，这样性能是提高了一些但想想服务端一大堆的html代码又该头痛了。而现在有了jtemplate问题就能很完美的解决了，服务端只需要把对象集合序列化成json格式并传入客户端，客户端再把json对象填充模版生成列表，这样一服务端传输的只是json格式的字符串，传输的数据量可是大大减少了，二遍历绑定的工作转移到了客户端，大大减轻了服务端的压力。

上面说了它的好处，下面该说说怎么用它了，还是拿数据列表来举例吧。

1. 要使用jtemplate首先要引入两个js脚本文件：

需要注意的是，jtemplate是在jquery的基础上实现的，所以脚本的引入顺序不能颠倒，否则会报错。

这些脚本可到http://jtemplates.tpython.com/去下载。

2. 然后建模版：

<div id="result_container"></div>

<textarea id="template-items" style="display:none">

  <tr><th>姓名</th><th>邮箱</th><th>生日</th></tr>
     {#foreach $T as item}
   <tr>
    　　<td>{$T.item.name}</td>
    　　<td>{$T.item.mail}</td>
          <td>{$T.item.birthday}</td>
   </tr>
   {#/for}
  </table>
</textarea>

这就是jtemplate模版的格式，模版内容是放在textarea里的，而关键字和数据是用大括号包起来的，并且以$T表示数据，关键字以#作为开始标记。

3. 用json数据填充模板并展示

// 填充数据并展示
$("#result_container").processTemplate(data);

　　　//这里也可以写成$("#result_container").setTemplateElement("template-items").processTemplate(data);
</script>

这样就算完成了，一个数据列表就呈现出来了：

5. 模版中调用javascript

在｛｝里你是可以随意写javascript脚本的，如生日我想换种格式显示，显示成2001/01/01,那么我们可以把模版中的{$T.item.birthday}改成{$T.item.birthday.replace(/-/g,'/')}，然后刷新下效果如下：

当然也可以把它包装成方法来调用，如先定义js方法：

function formatDate(date) {
return date.replace(/-/g,'/');
}

再把模版改成{formatDate($T.item.birthday)}就可以达到一样的效果了。

6. 如何在模版中包含textarea输入框

jtemplate的模版内容是放在textarea里面的，可是有时我们要在模版里包含textarea, 有两种方法可以实现：

　　1）注释模版中的内容，如模版改成：

<textarea id="template-items" style="display:none">
    
</textarea>

　　在IE下的效果如下图：

但在其它浏览器下(本人测试过的浏览器有360，谷歌，火狐)却显示不出来。

2）移除注释并使用特殊符号的编码表示包含的textarea中的特殊标签

如把<textarea rows="2" cols="10"></textarea>替换成<textarea rows="2" cols="10"> </textarea>

这样这些主流浏览器都能正常显示了。

jemplate支持大于号>和小于号<的编码，但却不支持大括号｛｝的编码，比如想在模版中使用my97datepicker日期控件，

它的参数是一个json对象是有大括号的，如果直接这样放入模版中是得不到想要的效果的，但也有变通的方式，如把onclick事件写到模版外面去

7. 上面举得列子是如何使用jtemplate绑定一个简单的数据列表，但其实jtemplate可以绑定任意json对象，以及还有很多使用方法，大家可以通过http://jtemplates.tpython.com/去了解

---------------------------------------------------------------------------------------

Templates是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>

posted @ 2015-01-20 09:58 火腿骑士阅读(296) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

jtemplate 为javascript前端html模版引擎

1、引入库文件

2、编写模板

3、渲染模板并展示

4、运行结果：

公告