Handlebars模板和Bootstrap模式的麻烦

时间:2014-11-19 18:16:16

标签: jquery handlebars.js each bootstrap-modal

我有以下车把模板

<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中每个项目的所有数据,并在模态弹出窗口中正确显示它。

0 个答案:

没有答案