jTemplates异步加载实现与HTML5 video视频开发
最近做有关Web App有关的项目，为了动态加载相应速度更快，采用了以下几个策略：
1.PHP后台提交自动生成静态列表页面。
2.PHP后台提交自动生成列表页资源/文章的json数据文件，javascriptFileName.js。下面的17881.js。
2.列表页滑动加载使用jTemplates读取javascriptFileName.js数据文件的数据进行展现。

jTemplates是一个基于JQuery的模板引擎插件,适合用来在页面上动态绑定数据动态生成展现数据。。在使用jTemplates时最好先定义好模板，然后将模板迁移至textarea隐藏文本框。官网地址：http://jtemplates.tpython.com/

<textarea id="txtTemplate" style="display:none">
<![CDATA[
This is {$T.name}.
]]>
</textarea>

jTemplates包含三个预定全局变量，分别是$T、$P、$Q。$T为模板提供数据调用功能，$P为模板提供参数变量调用功能，$Q.version提供当前jTemplate的版本.
jTemplates还支持#if、#for、#cycle、#foreach、#include、#param标签，处理实现复杂的业务。

#if 语法：
{#if |COND|}..{#elseif |COND|}..{#else}..{#/if}

#if 示例:

{#if $T.list_id} {$T.list_id} {#/if}
{#if 2*8==16} good {#else} fail {#/if}
{#if $T.age>=18)} 成人了 {#else} 未成年 {#/if}
{#if $T.list_id == 3} System list {#elseif $T.list_id == 4} Users List {#elseif $T.list_id == 5} Errors list {#/if}

#for 语法：
{#for |VAR| = |CODE| to |CODE| [step=|CODE|]}..{#else}..{#/for}
或
{#for |variable| = |start| to |end| [step=|stepBy|]}..{#else}..{#/for}

#for 示例：

默认步长：{#for index = 1 to 10} {$T.index} {#/for}
正向步长：{#for index = 1 to 10 step=3} {$T.index} {#/for}
负向步长及空循环：{#for index = 1 to 10 step=-3} {$T.index} {#else} nothing {#/for}
也可以在循环中使用变量：{#for index = $T.start to $T.end step=$T.step} {$T.index} {#/for}
注意条件中支持使用javascript代码，{#else}是在{#for...}未能执行的时的输出内容。。

主要代码：

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

<textarea id="resourceTemplateContainer" style="display: none;">
{#foreach $T.Lists as row begin=$T.start count=$T.end}
	<li>
		<div class="icon">
			<img alt="{$T.row.elementname}" src="{#if $T.row.elementlogo}{$T.row.elementlogo}{#else}../img/bg72.png{#/if}" title="">
			<i class=""></i>
		</div>
		<div class="info">
			<h2>{$T.row.elementname}</h2>
			<p class="txt">{$T.row.flodertype}</p>
			<span class="arrow"></span>
			<div class="downbtn free"><a title="{$T.row.elementname}" href="{$T.row.downpath}"></a>免费下载</div>
		</div>
		<a class="down-area" title="点击查看详情" href="res_{#if document.getElementById("isios").value ==0}17881{#elseif document.getElementById("isios").value ==1}17941{#/if}_{$T.row.reit_url}.html"></a>
	</li>
{#/for}
</textarea>

<script type="text/javascript">
$(document).ready(function(){
	$(".bar .slidemenubtn").click(function(){
		//bug fix -chrome中的 blur事件要先调用focus()否则blur无效
		this.focus();
		$(".slidemenu").slideToggle("slow");
	}).blur(function(){
		$(".slidemenu").hide("slow");
	});
	var pagenum = 1 , dataFileName = '../js/17881', templateName = "resourceTemplateContainer";
	$(".ajax-wrap ul").busdata({pageSize:"10", page:1, jsName:dataFileName + ".js",template:templateName});
	$(".load-btn").click(function(){
		pagenum++;
		var con = $(".ajax-wrap ul").busdata({pageSize:"10", page:pagenum, jsName:dataFileName + ".js", template:templateName});				
	});
});
</script>

数据格式17881.js

var data = {
TotalCount:20,
Lists:[ 
{reit_url:'pv01q2',elementname:'终极狂飙3',elementlogo:'../img/res/pv01q2/element_logo_1308051724017817.png',flodertype:'你沸腾的节操将会悲催的碎一地！',downpath:'../pack/3dcar