我有以下车把模板
<div id="container">
{{#each data.videoJason.entity.items}}
<div class="item">
<article>
<a href = "/video/{{{uuid}}}">
<figure class = "media">
<svg class="button" id="play-button">
<use xlink:href="#play-button-shape">
</svg>
<div class = "overlay"></div>
<img src = "{{{thumbnail.uri}}}"/>
</figure>
</a>
<p class="lead text-uppercase" data-toggle="modal" data-target="#myModal">{{title}}</p>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<dl class="details">
<div class="panel panel-default">
<div class="panel-heading"><dt>ID:{{id}}</dt></div>
<div class="panel-body">
<dt>Description:</dt><dd class="description">{{description}}</dd>
<dt>Date Created:</dt><dd>{{date.created}}</dd>
<dt>Date Published</dt><dd>{{date.published}}</dd>
<dt>Location:</dt><dd>{{location}}</dd>
<div class="panel panel-default">
<div class="panel-heading">
<dt>Overlay:</dt>
</div>
<div class="panel-body">
{{#each overlays}}
<dl class="list-unstyled">
<li><strong><i>Type:</i></strong> {{type}}</li>
<li><strong><i>Title:</i></strong> {{title}}</li>
<li><strong><i>Section:</i></strong> {{section}}</li>
<li><strong><i>Entity:</i></strong> {{entityType}}</li>
{{/each}}
</div>
</div>
</div>
</div>
</div>
</div>
</article>
</div>
{{/each}}
并尝试从&#34; overlay&#34;加载数据弹出一个模态的部分,以及其他数据。问题是数据不显示单个项目信息,只显示第一个项目。如果没有模态,我可以使用此javascript获取单个数据:
$('.lead').click(function() {
//Use the current button which triggered the event
$(this)
//Find the sibling to toggle, of a specified class
.siblings('.details')
//Toggle accordingly to the previous display status of the element
.slideToggle();
});
问题是如何通过#each
循环获取JSON中每个项目的所有数据,并在模态弹出窗口中正确显示它。