Нужно вывести карточки представленные pug миксином +room-card в div.js-data-container плагина paginationjs.
настройки плагина
import 'paginationjs/dist/pagination';
import roomCard from '../../cards/room-card/room-card-template.pug';
import './pagination.scss';
$(() => {
const pSize = 12;
$('.js-pagination-container').pagination({
dataSource: (done) => {
$.ajax({
type: 'GET',
url: './assets/json/rooms.json',
success: function(response) {
const arr = Object.keys(response).map((key) => [key, response[key]]);
done(arr);
}
});
},
pageSize: pSize, // elements number on the page
pageNumber: 1,
pageRange: 1,
autoHidePrevious: true,
autoHideNext: true,
footer: (currentPage) => {
const pageSize = pSize;
const prevPage = currentPage - 1;
let fromPage;
const toPage = currentPage * pageSize;
if (currentPage === 1) {
fromPage = currentPage;
} else {
fromPage = prevPage * pageSize + 1;
}
return `<div class=paginationjs-pages-footer>${fromPage} - ${toPage} из 100+ вариантов аренды</div>`;
},
callback(data) {
var html = simpleTemplating(data); // data = dataSource
$('.js-data-container').html(html);
},
});
});
function simpleTemplating(data) {
let html;
$.each(data, function(index, item){
const room = {
number: item[0],
status: item[1][0].status,
price: item[1][0].price,
photoName: item[1][0].photoName,
starsRate: item[1][0].starsRate,
feedbacks: item[1][0].feedbacks,
};
console.log(room); /* { "number": "888", "price": 9900, "starsRate": 5, "feedbacks": 145, "photoName": "room-card-888.jpg", "status": "Люкс" } */
html += roomCard(room); // ошибка возникает тут при передаче объекта room
// но если заменить в room-card-template.pug +room-card(room) на +room-card({})
// то карточки отображаются только пустые
console.log(html);
// изначально рабочий миксин который импортируется
// в room-card-template.pug выглядит так
// +room-card({
// number: "888",
// status: "Люкс",
// price: "9 900₽",
// photoName: "room-card-888.jpg",
// starsRate: "5",
// feedbacks: "145",
// })
});
return html;
}
// room-card-template.pug
include ./room-card
+room-card(room)
// room-card.pug
mixin room-card(params)
.room-card
.room-card__picture-container
+slick-carousel({
photoName: params.photoName, // тут появляется ошибка params is undefined
})
.room-card__number-price
+booking-caption({
roomNumber: params.number,
roomStatus: params.status,
roomPrice: params.price,
fontSize: "room-card-caption",
captionType: "room-card",
})
.room-card__feedback
+rate-button({
rateBtnName: `rateBtnName-${params.number}`,
rateBtnId: `rateBtnId-${params.number}-`,
starsCount: params.starsRate,
})
+feedbacks({
number: params.feedbacks,
text: "Отзывов",
})
если в файле room-card-template.pug заменить параметр room на пустой объект {} тогда карточки появляются, но пустые без данных
// room-card-template.pug
include ./room-card
//+room-card(room)
// вот так
+room-card({})
