Answer the question
In order to leave comments, you need to log in
paginationjs. How to pass parameters to pug mixin called from javascript?
You need to output the cards represented by the pug +room-card mixin in the div.js-data-container of the paginationjs plugin.
plugin settings
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
include ./room-card
//+room-card(room)
// вот так
+room-card({})
Answer the question
In order to leave comments, you need to log in
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question