关于artTemplate的循环嵌套
程序员文章站
2022-06-22 13:19:42
好处
使用artTemplate处理数据更加简便,且代码看起来更加整洁。
编写模板
有两种形式的模板,简洁版和原生版。他们都写在有自己的id名且类型为text/html的ja...
好处
关于artTemplate简洁版的循环嵌套问题,给出如下的例子
注意: 1.要引入artTemplate 2.script的id不要忘记设置,且type最好写一下 3.{{include ‘art4' $value}},表示调用id为art4的script。 如果数据tags下面还有一层x,这时嵌套的代码也要相应的变化。 数据变成如下所示:
代码变成如下所示:
使用artTemplate处理数据更加简便,且代码看起来更加整洁。
编写模板 有两种形式的模板,简洁版和原生版。他们都写在有自己的id名且类型为text/html的javascript中。 简洁版{{if admin}} {{each list}}
{{$value.user}}
{{/each}} {{/if}} 原生版<%if (admin){%> <%for (var i=0;i<%=i%>. <%=list[i].user%>
<%}%> <%}%>
关于artTemplate简洁版的循环嵌套问题,给出如下的例子
<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}}{{$value.title}} {{include 'art4' $value}}
{{/each}} </script> <script id="art4" type="text/html"> {{each tags}} {{$value.tags}} {{/each}} </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}}循环嵌套最主要的就是清楚循环的是哪一个变量,遍历的又是什么变量。{{$value.title}} {{include 'art4' $value.tags}}
{{/each}} </script> <script id="art4" type="text/html"> {{each x}} {{$value.tags}} {{/each}} </script>
上一篇: 前端基础之CSS
下一篇: 自定义select 小三角