Jade добавить Div каждые п элементов

Question

Я использую Jade, и я хотел бы сделать ряд каждые п элементов, так что-то вроде

.row 
    .product 
    .product 
    .product 
.row 

Это, кажется, сделать что-то вроде того, что я хочу ...

for p in products 
    - var klass = (i % 3 == 0?"row product simpleCart_shelfItem col-md-4":"product simpleCart_shelfItem col-md-4") 
    - i++ 
    div(class=klass) 
    .. more product stuff 

Это не то, что я хочу, потому что элемент .row добавлен в тот же div. Есть ли способ, которым я могу это сделать, не записывая материал продукта n раз?

Answer 1

Обычно подход к выполнению этой логики внутри шаблона Jade не очень хорошо работает.

Гораздо более надежный подход состоит в том, чтобы разбить массив продуктов на двумерный массив, то есть массив массивов продуктов внутри метода обработчика запросов.

Итак, предположим, что у вас есть следующий массив продуктов (products) в методе обработчика запросов. Вы можете преобразовать его в двумерный массив (products2D) и передать его как параметр вашему шаблону Jade.

Пример:

function arrayTo2DArray (list, howMany) { 
    var result = []; input = list.slice(0); 
    while(a[0]) { 
     result.push(a.splice(0, howMany)); 
    } 
    return result; 
} 

var handler = function(req, res) { 
    var products = [ ... ] // fetched from DB 
    var products2D = arrayTo2DArray(products, 3) 

    res.render('template', { products: products2D }); 
} 

Внутри Джейд шаблона вы можете заштукатуривать массивы (которые будут генерировать .row элементов), а затем внутри .row элемента можно перебирать продукты, генерирующие .product элементов.

Пример:

for prodGroup in products2D 
    .row 
    ... 
    for p in prodGroup 
     .product 
     ... more product stuff 

Вы можете обратиться к этому post для большего количества примеров преобразования массива в 2 одномерный массив.

Я надеюсь, что это поможет.

Answer 2

В коде есть ошибка. Это работает для меня:

function arrayTo2DArray (list, howMany) { 
    var result = [], a = list.slice(0); 
    while(a[0]) { 
     result.push(a.splice(0, howMany)); 
    } 
    return result; 
}