首页 > 网站 > WEB开发 > 正文

artTemplate子模板include

2024-04-27 14:07:36
字体:
来源:转载
供稿:网友

artTemplate子模板include

有多少人一直被官网,这坑坑的讲解所迷或

不废话,直接上demo

demo1:

<script type="text/html" id="temp2"><div>    <ul>{{each contents}}      <li>{{$value.content}}</li>{{/each}}                        </ul>        </div></script>  <script type="text/html" id="temp1">{{each list}}    <div>    <h2>{{$value.title}}</h2>    {{include 'temp2' $value.a}}    </div>{{/each}}</script>   <script type="text/javascript">$(function(){  var data = {      list:[      {      title:"这是一个测试标题1",      a:{      contents:[          {"content":"这是一段内容1"},          {"content":"这是一段内容1"},          {"content":"这是一段内容1"}        ]      }      },      {      title:"这是一个测试标题2",      a:{      contents:[          {"content":"这是一段内容2"},          {"content":"这是一段内容2"},          {"content":"这是一段内容2"}        ]      }      }      ]  };    var html = template('temp1', data);  $("#main").html(html);  });</script>

  

demo2:

<script type="text/html" id="temp2"><div>    <ul>{{each}}      <li>{{$index+1}} / {{$value.image}}</li>{{/each}}                        </ul>        </div></script>  <script type="text/html" id="temp1">{{each list}}    <div>    <h2>{{$value.title}}</h2>    {{include 'temp2' $value.images}}    </div>{{/each}}</script>   <script type="text/Javascript">$(function(){  var data = {      list:[      {      title:"这是一个测试标题1",      contents:[          {"content":"这是一段内容11"},          {"content":"这是一段内容12"},          {"content":"这是一段内容13"}        ],        images:[        {"image":"这是一张图片11"},          {"image":"这是一张图片12"},          {"image":"这是一张图片13"}        ]      },      {      title:"这是一个测试标题2",      contents:[          {"content":"这是一段内容21"},          {"content":"这是一段内容22"},          {"content":"这是一段内容23"}        ],        images:[        {"image":"这是一张图片21"},          {"image":"这是一张图片22"},          {"image":"这是一张图片23"}        ]            }      ]  };  var html = template('temp1', data);  $("#main").html(html);});</script>

这是一个神奇的世界,需要神奇的人去发现新大陆!

  


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表