jsRender绑定数据

Posted on 2016-08-17 14:26  二姑娘  阅读(249)  评论(0)    收藏  举报

首先，引入jquery（很重要），其次引入jsRender.js

1 <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
2 <script type="text/javascript" src="js/jquery.jsRender.min.js"></script>

如果是静态引入数据，那就再引入数据文件

1 <script type="text/javascript" src="js/dataInfo.js"></script>

注：数据必须是一个json对象

1 var data={
　　　"B":"bb",
2    "A":[{"a":"asas"},{"aa":1}], 
3 };

html页面写模板

 1 <div id="show">
 2 
 3 </div>
 4 <script type="text/x-jsrender" id="template">
 5 {{for data}}
 6     <h2>{{:B}}</h2>
 7     {{for A}}
 8         <h3>{{if aa!==""}}{{:aa}}{{/if}}</h3>
 9     {{/for}}
10 {{/for}}
11 </script>

 

js将数据绑到模板上

1 $(document).ready(function(){
2     var info=data;
3     var html=$.templates("#template").render(info);
4     $("#show").html(html);
5 });

静态数据绑定成功~

 

PS:JSRender获取父元素

用~定义新的变量，将要取到的元素缓存下来,然后直接用~a就行

{{for Info ~a = tt}}