0

我正在使用 Bootstrap 构建我的网站，该网站显示基于对 youtube API 的 JSON API 调用的结果。想象一个只有缩略图的 youtube 视频剪辑网格，当您单击其中一个时，它会打开该视频的播放器模式。

很好，我正在尝试在车把的帮助下实现它。

我被卡住了，因为我不能只用 {{each}} 对我从 youtube 获得的结果进行迭代，因为为了显示它们我（这是因为 Bootstrap）我需要添加单独的

 <ul> </ul> 
for every 4 
 <li></li>s.

我需要制作这个

<ul>
 <li> ... </li>
 <li> ... </li>
 <li> ... </li>
 <li> ... </li>
</ul>

然后又是新的

 <ul> with 4     <li>s inside 

 <ul>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
  <li> ... </li>
</ul>

现在单曲

  <ul> </ul>

我能做到 4

  <li> </li>

随着车把的使用，

但这是如果我只从 youtube 获得四个结果，但如果我得到 16 个结果，我怎么能告诉 Handlebars 把

 <ul> </ul> 
for every 4 
  <li>s

那是我的问题。

这是我目前在一个 UL 中的模板

<ul class="thumbnails" id="mostpopular">
          <script id="mostpopular-template" type="text/x-handlebars-template">
          {{#each this}}
          <li class="span3">
            <div class="thumbnail">
            <a href="{{url}}">
              <img src="{{thumb}}" alt="{{title}}">
            </a>
              <div class="yt-caption">
                <strong>{{title}}</strong><br>
              </div>
            </div>
          </li>
          {{/each}}
          </script>
        </ul>
4

1 回答 1

2

首先，不要这样做：

<ul>
    <script ...>
    </script>
</ul>

这是一个坏习惯，经常会导致“我的模板去哪儿了？” $('ul').html('')重置事物时的问题。你最好让你的模板<script>远离你的内容。

现在回到手头的事情。如果您<li>的 s 将具有相同的大小，那么您可以使用简单的 CSS 来平铺它们。只需在您的 s 上设置一个宽度<li>并将它们浮动在您的内部<ul>：

ul {
    overflow: hidden; /* To make the <ul> size itself to contain all the <li>s */
}
li {
    float: left;
    width: 100px;  /* Or whatever works, you might want a height as well. */
}​

然后把所有的<li>s 扔到 中<ul>，让浏览器来处理；例如：http: //jsfiddle.net/ambiguous/azWgp/

如果您必须在模板中执行此操作，则将您的数据分块到 JavaScript 中的数组中，并{{#each}}在模板中使用嵌套的 s。像这样的东西：

{{#each chunks}}
    <ul>
        {{#each this}}
            <li>...</li>
        {{/each}}
    </ul>
{{/each}}

例如：http: //jsfiddle.net/ambiguous/ABEzn/

你也可以添加你自己的助手，但这只是上面的方法稍微改变了一点。

于 2012-11-06T18:25:40.547 回答