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 для внедрения или какой-либо другой метод?