0

Bootstrap を使用してウェブサイトを構築しています。これは、youtube の API への JSON API 呼び出しに基づいて結果を表示しています。サムネイルのみを含む youtube ビデオ クリップのグリッドを想像してみてください。そのうちの 1 つをクリックすると、このビデオのプレーヤーでモーダルが開きます。

それは素晴らしいことです。私はハンドルバーを使ってそれを実装しようとしています。

YouTube から取得した結果を {{each}} で反復処理できないため、行き詰まっています。それらを表示するには (これは 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 から 4 つの結果しか得られない場合です。たとえば、16 の結果が得られた場合、Handlebars にどのように配置するように指示できますか?

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

それが私の質問です。

これが1つの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>は、単純な CSS を使用してそれらを並べて表示できます。あなたのに幅を設定し、あなた<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 に答える