handlebars，each循环里面套each循环

最新推荐文章于 2021-02-24 16:58:26 发布

灵活大胖子

最新推荐文章于 2021-02-24 16:58:26 发布

阅读量946

点赞数 2

分类专栏：前端HTML+CSS+JS系列文章标签： js

本文链接：https://blog.csdn.net/weixin_43972758/article/details/106276263

版权

前端HTML+CSS+JS系列专栏收录该内容

16 篇文章 0 订阅

订阅专栏

handlebars，each循环里面套each循环

handlebars可以用each自动进行循环，下面介绍一下each循环里面套循环来着。

html代码

!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>handlebars循环套循环</title>
    <style media="screen">
      *{
        margin: 0;
        padding: 0;
        list-style: none;
      }
      .time{
        float:left;
        width:100px;
      }
      .content{
        float:left;
        border-left:1px solid black;
        width: 100px;
        padding-left: 20px;
        padding-bottom: 10px;
      }
      #dataList li{
        clear: both;
      }
    </style>
  </head>

  <body>
    <div>
      <ul id="dataList">

      </ul>
    </div>
    <!-- 引入jquery、handlebars的JS文件 -->
    <script type="text/javascript" src="../js/jquery-1.8.3.min.js"></script>
    <script type="text/javascript" src="../js/handlebars.min.js"></script>
    <!-- 创建一个script标签，把type属性改为：text/x-handlebars-template -->
    <script id="table-template" type="text/x-handlebars-template">
      <!-- 把data的数据进行循环 -->
      {{#each data}}
        <li>
          <div class="time">
            <p>{{name}}</p>
          </div>
          <div class="content">
            <!-- 把data:info里面的数据再次进行循环 -->
            {{#each info}}
            <!-- info里面多个数据，所以这里可以直接连续打印多个this -->
            <p>{{this}}</p>
            {{/each}}
          </div>
        </li>
       {{/each}}
  </script>

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

  </body>
</html>

index.js代码：

// JSON数据
var data = [
  {
     "name":"张三",
     "info":[
       "眼睛",
       "耳朵",
       "鼻子"
     ]
   },{
    "name":"李四",
     "info":[
       "眼睛",
       "耳朵",
       "鼻子"
    ]
 }];

 // 封装一个函数，传进去三个值（填充的内容（script标签的id），（需要填充位置的id），（数据））
 var fillTemplate = function(templateObj,contentObj,fillData){
    var templateHtml = templateObj.html();
    var template = Handlebars.compile(templateHtml);
    contentObj.html(template(fillData));
};

 fillTemplate($("#table-template"),$("#dataList"),{data:data});

灵活大胖子

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
handlebars，each循环里面套each循环

handlebars，each循环里面套each循环handlebars可以用each自动进行循环，下面介绍一下each循环里面套循环来着。html代码!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>handlebars循环套循环</title> <style media="screen"> *{ m
复制链接

扫一扫