jquery - Coffeescript & ejs 配列から x 項目ごとに html を追加する方法

Question

私はnodeJsを使用しています..次のjavascriptがあります..データベースからプロジェクトの配列を反復処理します。私はこのサーバー側で行っていました。そのようにして、データは事前​​にソートされ、ハンドルバーを使用するときは、各ステートメントを単純にネストするだけでした..

これは、私がゲディを使用していたときのものでした..

function transform ( arr ) {
   var result = [], temp = [];
   arr.forEach( function ( elem, i ) {
   if ( i > 0 && i % 3 === 0 ) {
   result.push( temp );
   temp = [];
   }
   temp.push( elem );
   });
   if ( temp.length > 0 ) {
   result.push( temp );
   }
   return result;
}

上記のjsをcoffeescriptに翻訳しました。

temp = []
result = []
for row, i in projects
  if i > 0 && i % 3 is 0
    result.push(temp)
    temp = []
  temp.push(projects)
if temp.length > 0
  result.push(temp)

そうは言っても、私は次のcoffeescript ajaxリクエストを持っています:

$(document).ready ->
  $.ajax '/projects.json',
  dataType: 'json',
  success: (x,h,r) ->
    projects = x.data
    ## iterate through all of the projects

次のことを達成するために、3 回目の繰り返しの後に追加の HTML を挿入しようとしています。

上記のスクリーンショットを構成する html はこれで、そのブートストラップ 2.3 です。

<div class="row-fluid">
    <ul class="thumbnails">    
      <li class="span4 thumb-hover">
        <div class="thumbnail">
          <a href="/img/projects/" class="" target="_blank"><img src="/img/projects/thumbnails/admirecleaningservice_thumbnail.png" width="300px" height="200px"></a>
          <div class="mask">
            <h4>Admire Cleaning Services</h4>
            <p>Test 123</p>
          </div>
        </div>
      </li>
      <li class="span4 thumb-hover">
        <div class="thumbnail">
          <a href="/img/projects/" class="" target="_blank"><img src="/img/projects/thumbnails/admirecleaningservice_thumbnail.png" width="300px" height="200px"></a>
          <div class="mask">
            <h4>Admire Cleaning Services</h4>
            <p>Test 123</p>
          </div>
        </div>
      </li>
      <li class="span4 thumb-hover">
        <div class="thumbnail">
          <a href="/img/projects/" class="" target="_blank"><img src="/img/projects/thumbnails/admirecleaningservice_thumbnail.png" width="300px" height="200px"></a>
          <div class="mask">
            <h4>Admire Cleaning Services</h4>
            <p>Test 123</p>
          </div>
        </div>
      </li>
    </ul>
</div>
<div class="row-fluid">
    <ul class="thumbnails">    
      <li class="span4 thumb-hover">
        <div class="thumbnail">
          <a href="/img/projects/" class="" target="_blank"><img src="/img/projects/thumbnails/admirecleaningservice_thumbnail.png" width="300px" height="200px"></a>
          <div class="mask">
            <h4>Admire Cleaning Services</h4>
            <p>Test 123</p>
          </div>
        </div>
      </li>
      <li class="span4 thumb-hover">
        <div class="thumbnail">
          <a href="/img/projects/" class="" target="_blank"><img src="/img/projects/thumbnails/admirecleaningservice_thumbnail.png" width="300px" height="200px"></a>
          <div class="mask">
            <h4>Admire Cleaning Services</h4>
            <p>Test 123</p>
          </div>
        </div>
      </li>
      <li class="span4 thumb-hover">
        <div class="thumbnail">
          <a href="/img/projects/" class="" target="_blank"><img src="/img/projects/thumbnails/admirecleaningservice_thumbnail.png" width="300px" height="200px"></a>
          <div class="mask">
            <h4>Admire Cleaning Services</h4>
            <p>Test 123</p>
          </div>
        </div>
      </li>
    </ul>
</div>

配列コントローラー側を整理し、render メソッドに渡し、ejs に 2 つのネストされたループを実行させ、jquery と ajax リクエストを使用して注入するか、他のメソッドを使用する方が有益でしょうか?