JS模板引擎jTemplates 使用笔记（二）:Live Refresh!

1. 功能简介

允许选择的元素进行自动更新；使用简单但功能强大。

2. 方法说明

Updater  jQuery.fn.processTemplateStart(String url, Array param, Integer interval, [Array args], [Object options]);

void  jQuery.fn.processTemplateStop();

参数详细介绍请参考官方文档jTemplates。

3. 简单示例

本示例使用MVC框架搭建

I:使用*.Aspx搭建展示内容页

<script src="<%=Url.Content("~/Scripts/jquery-jtemplates.js") %>" type="text/javascript"></script>
<script type="text/javascript" >
<!--
$(function() {
	var temp='<a href="#result" id="start">start</a>'
		+'<a href="#result" id="stop">stop</a>'
		+'<div id="infobox">-</div>';
	
	$("#result").setTemplateURL(temp);
	$("#result").processTemplate();

	//设置模板内容
	$("#infobox").setTemplate('{$T.Time}');

	var i = 0;
	$("#start").click(function() {
		$("#infobox")
		.processTemplateStart('<%=Url.Action("GetLiveData")%>',null,1000);
		
	});

	$("#stop").click(function() {
		$("#infobox").processTemplateStop();
	});
});
	
//-->
</script>
<div id="result"></div>

I:Controller 和 Model

Controller代码:

public ActionResult GetLiveData()
{
	return Json(new LiveModel
	           {
	            Time = DateTime.Now.ToString()
	           }, JsonRequestBehavior.AllowGet);
}

public ActionResult GetLiveTemplate()
{
	return PartialView("RefreshTemp");
}

public ActionResult LiveRefresh()
{
	return View();
}

Model代码:

public class LiveModel
{
	public string Time { get; set; }

}

4. 最终效果图

5. 小结和备注

目前在IE环境下,通过Ajax的Get同一个地址会从CACHE中获取。于是该示例中结果会保持不变。但在FF,chrome中均正常。