T
T
tostershmoster2022-03-05 14:53:20
JavaScript
tostershmoster, 2022-03-05 14:53:20

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: "Отзывов",
      })


if in the room-card-template.pug file the room parameter is replaced with an empty object {} then the cards appear, but empty without data
// 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 question

Ask a Question

731 491 924 answers to any question