jsRender绑定数据

首先，引入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就行

秒客网

jsRender绑定数据

相关文章