原创 

JS模板引擎jTemplates 的使用

分类:    1052人阅读    IT小君  2015-03-02 15:18

一、端倪

1 引擎简介

  jTemplates是一个基于Jquery的js模板引擎插件。该引擎全部代码由JS实现,可以配合AJAX,JSON一起协同工作,模板内容可以用JS代码,实现了活动更新,可以自动从服务器更新模板生成的内容。 
  jTemplates能免费应用于商业和非商业。

2 下载引用

  最新版本号:0.7.8 
  示例包:http://jtemplates.tpython.com/jTemplates.zip 
  压缩后:http://jtemplates.tpython.com/jTemplates/jquery-jtemplates.js 
  未压缩:http://jtemplates.tpython.com/jTemplates/jquery-jtemplates_uncompressed.js

3 简单示例

  本Demo使用MVC框架搭建。 
  I:使用*.ASCX搭建模板内容 
  主要代码

{#template MAIN}
 <div id="header">{$T.Name}</div>
 <table>
 {#foreach $T.Peoples as record}
  {#include ROW root=$T.record}
 {#/for}
 </table>
{#/template MAIN}

{#template ROW}
 <tr bgcolor="{#cycle values=['#AAAAEE','#CCCCFF']}">
  <td>{$T.FirstName.bold()}</td>
  <td>{$T.Age}</td>
  <td>{$T.Email.link('mailto:'+$T.Email)}</td>
 </tr>
{#/template ROW}

  II: 使用*.Aspx搭建展示页面 
    主要代码

<script src="<%=Url.Content("~/Scripts/jquery-jtemplates.js")%>" 
 type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function () {		
    $.ajax({
	type:"POST",
	url: "<%= Url.Action("GetData") %>",
	data: "",
	contentType: "application/json; charset=utf-8",
	cache:false,
	dataType: "json",
	success: function(data){
		if(data){
			$("#jTemplateDemo").setTemplateURL("<%=Url.Action("GetTemplate")%>");						
			$("#jTemplateDemo").processTemplate(data);	
				
		}
	}
    });    
});
		
</script>

<div id="jTemplateDemo"></div>

  III:Action和Model 
   Action主要代码

public ActionResult Index(string id)
{
	return View();
}
/// <summary>
/// Request for template content
/// </summary>
/// <returns>templates</returns>
public ActionResult GetTemplate()
{
	return PartialView("TableTemp");
}

/// <summary>
/// Request for temp data
/// </summary>
/// <returns>temp data</returns>
[HttpPost]
public ActionResult  GetData()
{
var model = new TempModel{
	Name = "New Employees",
	Peoples = new List{
		new Person {ID = "1", FirstName = "Anne", Email = "anne@domain.com",Age=20},
		new Person {ID = "2", FirstName = "Amelie", Email = "amelie@domain.com",Age=22},
		new Person {ID = "3", FirstName = "Polly", Email = "polly@domain.com",Age=35},
		new Person {ID = "4", FirstName = "Alice", Email = "alice@domain.com",Age=27},
		new Person {ID = "5", FirstName = "Martha", Email = "martha@domain.com",Age=32}
	}
};
	return Json(model);
}


   Model主要代码

 

public class Person
{
	public string ID { get; set; }
	public string FirstName { get; set; }
	public string Email { get; set; }
	public int Age { get; set; }
}

public class TempModel
{
	public string Name { get; set; }
	public List<Person> Peoples { get; set; }

}

3 运行效果图

 

 

二、还是端倪(哈哈)


一 , 简单介绍

它是一个基于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: 'cssrain@domain.com'},
     {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},
     {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},
     {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},
     {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}
    ]
   };
   // 附上模板
   $("#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: 'cssrain@domain.com'},
    {id: 2, name: '皮特', age: 24, mail: 'cssrain@domain.com'},
    {id: 3, name: '卡卡', age: 20, mail: 'cssrain@domain.com'},
    {id: 4, name: '戏戏', age: 26, mail: 'cssrain@domain.com'},
    {id: 5, name: '一揪', age: 25, mail: 'cssrain@domain.com'}
 ]
}

在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()的简写方式:可以参考这篇文章:

http://www.cssrain.cn/article.asp?id=1116

CssRain提供的几个例子,按照官方写的:

点击下载此文件

jtemplates官方首页 :

http://jtemplates.tpython.com/

官方的几个例子:
1. Simple template (see source as description)
example1.html

2. Example 1 + multiple elements + parameters
example2.html

3. Example 1 (Valid XHTML 1.1 !)
example3.html

4. Multitemplate (Valid XHTML 1.1)
example4.html


点击广告,支持我们为你提供更好的服务

中小型创意设计服务公司网站模板

canvas炫酷鼠标移动文字粒子特效

网页设计开发公司网站模板

响应式时尚单品在线商城网站模板

js+css3抽奖转盘旋转点餐代码

html5 canvas进度条圆环图表统计动画特效

html5 svg夜空中星星流星动画场景特效

HTML5数字产品服务公司网站模板

响应式咖啡饮品宣传网站模板

jQuery右端悬浮带返回顶部特效

html5 canvas彩色碎片组合球形旋转动画特效

css鼠标跟随文字模糊特效

HTML5现代家居装潢公司网站模板

css+js实现的颜色渐变数字时钟动画特效

响应式太阳能能源公司网站模板

小众时尚单品在线电子商务网站模板

HTML5 Canvas竖直流动线条背景动画特效

现代时尚家具公司网站模板

html5图标下拉搜索框自动匹配代码

有机水果蔬菜HTML5网站模板

点击广告,支持我们为你提供更好的服务
 工具推荐 更多»
点击广告,支持我们为你提供更好的服务