使用嵌套div填充带有Handlebars的jQuery手风琴

时间：2018-03-25 14:59:05

标签： jquery handlebars.js accordion

我用jQuery构建了一个手风琴，并通过一个把手模板填充了内容，它按预期工作。但是，当我扩展解决方案以在主体内包含嵌套div时，只有第一个手风琴行的嵌套内容起作用。其他手风琴行将展开并显示上层细节，但嵌入的div不会填充。

我已经使用静态内容和来自把手模板的数据填充了嵌套div，但结果是相同的。

<!doctype HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Active Client List</title>
    <script src="https://code.jquery.com/jquery-3.3.1.js"
            integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
            crossorigin="anonymous"></script>
    <script>
        $(document).ready(function () {
            //toggle the component with class clientbody
            $(".clienthead").click(function () {
                if ($('.clientbody').is(':visible')) {
                    $(".clientbody").slideUp(330);
                    $(".plusminus").text('+');
                }
                if ($(this).next(".clientbody").is(':visible')) {
                    $(this).next(".clientbody").slideUp(400);
                    $(this).children(".plusminus").text('+');
                }
                else {
                    $(this).next(".clientbody").slideDown(330);
                    $(this).children(".plusminus").text('-');
                }
            });
            $('#appointcontainer').click(function () {
                $('#appointlst').slideToggle(400);
            });
        });
    </script>
    <link rel="stylesheet" type="text/css" href="css/clientlst.css" />
</head>

<body>
    <h3>Active Client List</h3>
    <div id="clientcontainer">
        <!-- clientListTemplate Handlebar template start -->
        <script id='clientListTemplate' type="text/x-handlebars-template">
            {{#each clients}}
            <div id="clienthead" class="clienthead">
                {{name}}
                <span></span>
                <span class="plusminus">+</span>

            </div>
            <div id="clientbody" class="clientbody " style="display: none;">
                <table class="clientdet">
                    <tr>
                        <td class="tdicon"><img src="icons/phone.png" style="height:22px;width:22px;" /></td>
                        <td style="width:200px"> - {{fone}}</td>
                        <td rowspan="2" align="right"><img src="{{avitar}}" style="height:60px;" /></td>
                    </tr>
                    <tr>
                        <td class="tdicon"><img src="icons/mail.png" style="height:22px;width:22px;" /></td>
                        <td> - {{email}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <!--  partial template content begin -->
                            <div id="appointlst">
                                <hr />
                                <p>Appointment 1</p>
                                <p>Appointment 2</p>
                                <p>Appointment 3</p>
                            </div>
                            <!--  partial template content end -->
                            <!-- div function as button for slidetoggle begin -->
                            <div id="appointcontainer">
                                <img id="calmonth" src="icons/calmonth.png" style="height:22px;width:22px;" />
                                <span class="appointcontainer"> - Appointments</span>
                                <img id="downApp" src="icons/down.png" style="height:22px;width:22px;" />
                            </div>
                            <!-- div function as button for slidetoggle end -->
                        </td>
                    </tr>
                </table>
            </div>
            {{/each}}
        </script>
        <!-- clientListTemplate Handlebar template end -->
    </div>
    <script src="js/handlebars-v4.0.11.js"></script>
    <script src="js/clientlst.js"></script>
</body>
</html>

js文件非常简单：

var clntRequest = new XMLHttpRequest();
clntRequest.open('GET', 'http://localhost/trainer/json/clientlst.json');
clntRequest.onload = function () {
    if (clntRequest.status >= 200 && clntRequest.status < 400) {
        var data = JSON.parse(clntRequest.responseText);
        createHTML(data);
    } else {
        console.log('Connect active, error returned');
    }
};

clntRequest.onerror = function () {
    console.log('Connection error');
};

clntRequest.send();

function createHTML(clientdata) {
    var rawTemplate = document.getElementById('clientListTemplate').innerHTML;
    var compiledTemplate = Handlebars.compile(rawTemplate);
    var generatedHTML = compiledTemplate(clientdata);
    var accordioncontainer = document.getElementById('clientcontainer');
    accordioncontainer.innerHTML = generatedHTML;
}

我用于此原型的json文件如下：

{
  "clients":  [
    {
      "name": "Abbot, Jerome",
      "fone": "(770) 233-0025",
      "email": "abbotj@aol.com",
      "avitar": "icons/abelincoln.jpg",
      "appointments": [
        {
          "sdate": "March 31, 2018",
          "timeframe": "1",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Piedmont Park"
        },
        {
          "sdate": "February 26, 2018",
          "timeframe": "0",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Decatur"
        },
        {
          "sdate": "February 16, 2018",
          "timeframe": "0",
          "starttime": "08:30",
          "endtime": "09:30",
          "location": "Piedmont Park"
        }
      ] 
    },
    {
      "name": "Alexander, Jason",
      "fone": "(404) 237-1138",
      "email": "jalexander@aol.com",
      "avitar": "icons/gandhi.jpg",
      "appointments": [
        {
          "sdate": "March 27, 2018",
          "timeframe": "1",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Buckhead"
        },
        {
          "sdate": "March 06, 2018",
          "timeframe": "0",
          "starttime": "08:30",
          "endtime": "09:30",
          "location": "Buckhead"
        }
      ]
    },
    {
      "name": "Bobber, Harriott",
      "fone": "(678) 313-7272",
      "email": "harriott.bobber4j@gmail.com",
      "avitar": "icons/user.png",
      "appointments": [
        {
          "sdate": "April 04, 2018",
          "timeframe": "1",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Piedmont Park"
        }
      ]
    }
  ]
}

我还附上了css：

body{background-color: navajowhite;}
#clientcontainer {width: 320px;}
#clienthead {
    background-color: #847c7c;
    color: white;
    cursor: pointer;
    font-family: arial;
    font-size: 12px;
    margin: 0 0 1px 0;
    padding: 7px 11px 11px;
    font-weight: bold;
}
#clientbody {background: transparent;padding-left: 15px;}
.clientdet {background-color:transparent;}
#tdicon {vertical-align:bottom;width:27px;}
.sched_link{font-size:smaller;font-weight:lighter;}
.plusminus {float: right;}
.links {float: left;display: inline-block;width: 200px;}
.avitar {float: right;display: inline-block;width: 100px;}
#appointcontainer {border-bottom: 4px solid, red;}
#calmonth {vertical-align: middle;}
#appointlst {display: none;}
#downApp {float: right;}

1 个答案:

答案 0 :(得分：0)

您的代码似乎有效，您可以运行以下代码段来查看，我只是将您的代码复制粘贴到代码段中（并调整一下以便插入车把结果内容）。您是否在DOM中检查过您的代码未呈现或您刚刚在屏幕上看到您的数据不存在？

$(document).ready(function () {
  var context = {
  "clients":  [
    {
      "name": "Abbot, Jerome",
      "fone": "(770) 233-0025",
      "email": "abbotj@aol.com",
      "avitar": "icons/abelincoln.jpg",
      "appointments": [
        {
          "sdate": "March 31, 2018",
          "timeframe": "1",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Piedmont Park"
        },
        {
          "sdate": "February 26, 2018",
          "timeframe": "0",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Decatur"
        },
        {
          "sdate": "February 16, 2018",
          "timeframe": "0",
          "starttime": "08:30",
          "endtime": "09:30",
          "location": "Piedmont Park"
        }
      ] 
    },
    {
      "name": "Alexander, Jason",
      "fone": "(404) 237-1138",
      "email": "jalexander@aol.com",
      "avitar": "icons/gandhi.jpg",
      "appointments": [
        {
          "sdate": "March 27, 2018",
          "timeframe": "1",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Buckhead"
        },
        {
          "sdate": "March 06, 2018",
          "timeframe": "0",
          "starttime": "08:30",
          "endtime": "09:30",
          "location": "Buckhead"
        }
      ]
    },
    {
      "name": "Bobber, Harriott",
      "fone": "(678) 313-7272",
      "email": "harriott.bobber4j@gmail.com",
      "avitar": "icons/user.png",
      "appointments": [
        {
          "sdate": "April 04, 2018",
          "timeframe": "1",
          "starttime": "09:00",
          "endtime": "10:00",
          "location": "Piedmont Park"
        }
      ]
    }
  ]
};
  Handlebars.registerHelper('ifEqualsChained', function() {
      var options = arguments[arguments.length-1];
      // Assuming that all wanted operator are '||'
      valueToTest=arguments[0];
      for (var i = 1; i < (arguments.length - 1); i++) {
        if (valueToTest === arguments[i]) {
          return options.fn(this);
        }
      }
      return options.inverse(this);
  });
  var source = $("#sourceTemplate").html();
  var template = Handlebars.compile(source);
  var html = template(context);
  $("#resultPlaceholder").html(html);
              $(".clienthead").click(function () {
                if ($('.clientbody').is(':visible')) {
                    $(".clientbody").slideUp(330);
                    $(".plusminus").text('+');
                }
                if ($(this).next(".clientbody").is(':visible')) {
                    $(this).next(".clientbody").slideUp(400);
                    $(this).children(".plusminus").text('+');
                }
                else {
                    $(this).next(".clientbody").slideDown(330);
                    $(this).children(".plusminus").text('-');
                }
            });
            $('#appointcontainer').click(function () {
                $('#appointlst').slideToggle(400);
            });

});
body{background-color: navajowhite;}
#clientcontainer {width: 320px;}
#clienthead {
    background-color: #847c7c;
    color: white;
    cursor: pointer;
    font-family: arial;
    font-size: 12px;
    margin: 0 0 1px 0;
    padding: 7px 11px 11px;
    font-weight: bold;
}
#clientbody {background: transparent;padding-left: 15px;}
.clientdet {background-color:transparent;}
#tdicon {vertical-align:bottom;width:27px;}
.sched_link{font-size:smaller;font-weight:lighter;}
.plusminus {float: right;}
.links {float: left;display: inline-block;width: 200px;}
.avitar {float: right;display: inline-block;width: 100px;}
#appointcontainer {border-bottom: 4px solid, red;}
#calmonth {vertical-align: middle;}
#appointlst {display: none;}
#downApp {float: right;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.5/handlebars.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script id="sourceTemplate" type="text/x-handlebars-template">
     {{#each clients}}
            <div id="clienthead" class="clienthead">
                {{name}}
                <span></span>
                <span class="plusminus">+</span>

            </div>
            <div id="clientbody" class="clientbody " style="display: none;">
                <table class="clientdet">
                    <tr>
                        <td class="tdicon"><img src="icons/phone.png" style="height:22px;width:22px;" /></td>
                        <td style="width:200px"> - {{fone}}</td>
                        <td rowspan="2" align="right"><img src="{{avitar}}" style="height:60px;" /></td>
                    </tr>
                    <tr>
                        <td class="tdicon"><img src="icons/mail.png" style="height:22px;width:22px;" /></td>
                        <td> - {{email}}</td>
                    </tr>
                    <tr>
                        <td colspan="3">
                            <!--  partial template content begin -->
                            <div id="appointlst">
                                <hr />
                                <p>Appointment 1</p>
                                <p>Appointment 2</p>
                                <p>Appointment 3</p>
                            </div>
                            <!--  partial template content end -->
                            <!-- div function as button for slidetoggle begin -->
                            <div id="appointcontainer">
                                <img id="calmonth" src="icons/calmonth.png" style="height:22px;width:22px;" />
                                <span class="appointcontainer"> - Appointments</span>
                                <img id="downApp" src="icons/down.png" style="height:22px;width:22px;" />
                            </div>
                            <!-- div function as button for slidetoggle end -->
                        </td>
                    </tr>
                </table>
            </div>
            {{/each}}
</script>
 <h3>Active Client List</h3>
    <div id="clientcontainer">
<div id="resultPlaceholder">
</div>
</div>

相关问题
最新问题