00、语法
${}:等同于{{= }}//jsp中建议{{= }},注意空格。
{{html }}:若变量中带有html标签是有次tag
{{if }} {{else}}:判断结构
{{each }}:循环结构
tmpl模板(创建)
方法1、
var templateStr="<span>"+
"<a href=''>{{= LinkText}}</a>"+
"</span>";
$.template("template",templateStr);
$.tmpl('template',list).appendTo(".realContent"); //有引号
方法2、
<script id="template" type="text/x-jquery-tmpl" >
<span>
<a href="">{{= linkText}}</a>
</span>
</script>
$.tmpl(template,list).appendTo(".realContent");//无引号
00、tmpl模板(取值)
1、
(当user.garade==null 时 user.grade.gradeName致使模板出错)
{{if user.garade!=null}} {{= user.grade.gradeName}} {{/if}}
2、html内容输出(answer=“ <a href="" >answer</a>”)
{{html answer}}
00、tmpl追加属性(循环index)
$.tmpl( qustionTemplate,list,
{getIndex:function(){
index=index+1;
return index;
}
}
).appendTo(".realContent");
调用:<a href="javascript:void(0);" id="{{html $item.getIndex()}}">我要测试</a>
00、例子1
function ajaxLoadQuestionType(params,url) { $.post(url,params,function(data){ $("#span_qt a:eq(0)").siblings("a").remove(); data = data.replace(/\s/ig, ' '); data=eval('('+data+')'); var qtTmplStr='<a name="{{= ID}}" href="javascript:void(0);"> {{= QTYPE_NAME}} </a>'; $.template("qtTmpl",qtTmplStr); $.tmpl("qtTmpl",data).appendTo("#span_qt"); }); }
例子2
<!-- 试题列表模板 --> <script id="qustionTemplate" type="text/x-jquery-tmpl"> <div id="{{= myStore.id}}" style="{{html $item.getBorder()}}"> <h3>题型{{if questionType!=null}} {{= questionType.QTYPE_NAME}} {{/if}} 年级:{{if grade!=null}} {{= grade.GRADE_NAME}} {{/if}} 学科:{{if subject!=null}} {{= subject.sbj_name}} {{/if}} 知识点:{{= knowledge_content}}</strong> 难度:{{if dictinfo!=null}} {{= dictinfo.info}} {{/if}} 使用次数:<strong>{{= quote_num}} </h3> <ul class="daan_con">{{html qcontent}}</ul> {{if answerCount>0}} <p>{{html answer}}</p> <h5>答案解析</h5> <p>{{html answer_analysis}}</p> {{/if}} <div class="result dd" style="float:right;"> {{if answerCount>0}} <a id="{{html $item.getIndex()}}" οnclick="popLayerTest(this)" >重做</a> {{/if}} </div> </script> $.tmpl( qustionTemplate,data.items, { getIndex:function(){ index=index+1; return index; }, getBorder:function(){ i=i+1; if(i==1){ return "margin:0; border:0;"; } return ""; } } ).appendTo(".realContent");