Coffeescript и EJS, как добавить HTML каждые х элементов из массива

Я использую nodeJs.. У меня есть следующий javascript.. чтобы перебрать массив проектов из моей базы данных. я делал это на стороне сервера, таким образом, данные были предварительно отсортированы, и при использовании руля все, что мне нужно было сделать, это просто вставить каждое утверждение...

Это было, когда я использовал Geddy..

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)

При этом у меня есть следующий запрос ajax coffeescript:

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

Я пытаюсь вставить дополнительный 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>

Было бы более выгодно организовать сторону контроллера массива, перейти к методу рендеринга, а затем заставить ejs просто выполнить два вложенных цикла, использовать jquery и запрос ajax для внедрения или какой-либо другой метод?

0 ответов

Другие вопросы по тегам