微软template.js

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" onclick="popLayerTest(this)" href="javascript:void(0);" class="btn_tk01">重做</a>
           	  <a href="javascript:void(0);"  onclick="seleteAnwserHistory(this,'{{= id }}')" onmouseout="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" onclick='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