关于artTemplate的循环嵌套

xiaoxiao2021-02-28  88

好处

       使用artTemplate处理数据更加简便,且代码看起来更加整洁。

编写模板

     有两种形式的模板,简洁版和原生版。他们都写在有自己的id名且类型为text/html的javascript中。

     简洁版

          {{if admin}} {{each list}} <div>{{$value.user}}</div> {{/each}} {{/if}}

      原生版

    <%if (admin){%> <%for (var i=0;i<list.length;i++) {%> <div><%=i%>. <%=list[i].user%></div> <%}%> <%}%>     关于artTemplate简洁版的循环嵌套问题,给出如下的例子 <div id="content"></div> <script> $(function(){ var data1 = { list : [{ title :'周一', tags : [{ "tags":'英语'},{ "tags":'语文'},{ "tags":'数学'},{ "tags":'政治'} ]},{ title : '周二', tags : [{ "tags":'地理'}, { "tags":'体育'}, { "tags":'英语'}, { "tags":'历史'}] }] };  var html = template("art3",data1);  console.log(html);  $("#content").append(html);  }) </script> <script id="art3" type="text/html"> {{each list}} <div> <h2>{{$value.title}}</h2> {{include 'art4' $value}} </div> {{/each}} </script> <script id="art4" type="text/html"> <ul> {{each tags}} <li>{{$value.tags}}</li> {{/each}} </ul> </script> 注意: 1.要引入artTemplate             2.script的id不要忘记设置,且type最好写一下             3.{{include  ‘art4'  $value}},表示调用id为art4的script。 如果数据tags下面还有一层x,这时嵌套的代码也要相应的变化。     数据变成如下所示:     var data1 = { list : [{ title :'周一', tags : { x:[{"tags":'英语'}, { "tags":'语文'}, { "tags":'数学'}, { "tags":'政治'} ]} },{ title : '周二', tags :{ x:[{"tags":'地理'}, { "tags":'体育'}, { "tags":'英语'}, { "tags":'历史'}] } }] };

    代码变成如下所示:            <script id="art3" type="text/html"> {{each list}} <div> <h2>{{$value.title}}</h2> {{include 'art4' $value.tags}} </div> {{/each}} </script> <script id="art4" type="text/html"> <ul> {{each x}} <li>{{$value.tags}}</li> {{/each}} </ul> </script>  循环嵌套最主要的就是清楚循环的是哪一个变量,遍历的又是什么变量。
转载请注明原文地址: https://www.6miu.com/read-23637.html

最新回复(0)