001、语法
${}:等同于{{= }}//jsp中建议{{= }},注意空格。
{{html }}:若变量中带有html标签是有次tag
{{if }} {{else}}:判断结构
{{each }}:循环结构
002、引入js
<script type="text/javascript" src="js/jq/jquery.tmpl.js"></script>
003、使用
方法1、简单结构使用此方法
<script type="text/javascript"> var templateStr="<span>"+ "<a href=''>{{= LinkText}}</a>"+ "</span>"; $.template("template",templateStr); $("#template").tmpl(data).appendTo("#targetDom"); </script>
方法2、复杂结构使用此方法
<script id="template" type="text/x-jquery-tmpl" > <span> <a href="">{{= linkText}}</a> </span> </script> <script type="text/javascript"> $.tmpl("#template",data).appendTo("targetDom"); //或者 $.tmpl(template,data).appendTo("targetDom"); </script>
004、模板取值
1、 (当user.garade==null 时 user.grade.gradeName致使模板出错)
{{if user.garade!=null}} {{= user.grade.gradeName}} {{/if}}
2、html内容输出(answer=“ <a href="" >answer</a>”)
{{html answer}}
005、实例
<!-- 试题列表模板 -->
<script id="qustionTemplate" type="text/x-jquery-tmpl">
<div class="daan1" style="margin:0">
<h3> 题型:<strong>{{if questionType!=null}} {{= questionType.QTYPE_NAME}} {{/if}} </strong>
年级:<strong>{{if grade!=null}} {{= grade.GRADE_NAME}} {{/if}} </strong>
学科:<strong>{{if subject!=null}} {{= subject.sbj_name}} {{/if}} </strong>
知识点:<strong>{{= knowledge_content}}</strong>
难度:<strong>{{if dictinfo!=null}} {{= dictinfo.info}} {{/if}} </strong> 使用次数:<strong>{{= quote_num}}</strong>
</h3>
<ul class="daan_con">{{html qcontent}}</ul>
<!--{{if answerCount==0}}-->
<div class="result">
<!--正确答案-->
<div class="detail">
<h5>正确答案</h5>
<p>{{html answer}}</p>
<h5>答案解析</h5>
<p>{{html answer_analysis}}</p>
</div>
<!--正确答案结束-->
</div>
<!-- {{/if}}-->
<!--end result-->
</div>
<!--end daan-->
<div class="result dd" style="float:right;">
<a id="2" name="{{= id }}" rel="5" οnclick="popLayerTest(this)" href="javascript:void(0);" class="btn_tk01">重做</a>
<a href="javascript:void(0);" οnclick="seleteAnwserHistory(this,'{{= id }}')" οnmοuseοut="imgOut(this)" class="btn_tk02">答题记录</a>
<div class="pop_ms2">
<table width="270px" border="1"></table>
</div>
<a href='javascript:void(0);' class="btn_tk03" οnclick='javascript:if(confirm("你确认要删除吗?"))location="*******.action?my_questionid={{= myQuestions.id}}"'>从错题本中删除</a> </div>
<div class="clearfix"></div>
</div>
</script>
006、为模板扩展属性值(例:显示每行的index)
//异步加载试题列表 //模板将追加的属性或方法赋给内置变量 $item function ajaxLoadQuestion() { var index=0; $.tmpl( qustionTemplate,data, { getIndex:function(){ index=index+1; return index; } } , { } ).appendTo(".realContent"); //重新绑定事件 initPage(); }
调用追加变量 <td> {{html $item.getIndex()}}</td> 此方法每调用一次index 就+1