首先,引入jquery(很重要),其次引入jsRender.js
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="js/jquery.jsRender.min.js"></script>
如果是静态引入数据,那就再引入数据文件
<script type="text/javascript" src="js/dataInfo.js"></script>
注:数据必须是一个json对象
var data={
"B":"bb",
"A":[{"a":"asas"},{"aa":1}],
};
html页面写模板
<div id="show"> </div>
<script type="text/x-jsrender" id="template">
{{for data}}
<h2>{{:B}}</h2>
{{for A}}
<h3>{{if aa!==""}}{{:aa}}{{/if}}</h3>
{{/for}}
{{/for}}
</script>
js将数据绑到模板上
$(document).ready(function(){
var info=data;
var html=$.templates("#template").render(info);
$("#show").html(html);
});
静态数据绑定成功~
PS:JSRender获取父元素
用~定义新的变量,将要取到的元素缓存下来,然后直接用~a就行
{{for Info ~a = tt}}