Страницы

Поиск по вопросам

вторник, 9 июля 2019 г.

Как добавлять инкремент(i) в css класс на pug(он же бывший jade)?

На нативном javascript это было-бы примерно следующим образом:
HTML:


Js:
var buttons = document.querySelectorAll('.btns');
for(i=0; iPug:
- var modalList = [{ title: "Многокамерная съемка", posterImage: "content/video.jpg", description: 'Мы используем камеры Panasonic, Sony, Blackmagic, Go Pro.Съемка на несколько камер с возможностью прямой трансляции, проекторы, плазменные панели. Онлайн трансляции в сети Интернет: 720р, 1080р, 4К.В нашем арсенале мультироторы для съемки верхних планов с 3-х осевой стабилизацией и возможностью передачи сигнала на пульт видеоинженеров (с дальнейшей трансляцией на экраны или в сеть).Кинематографические краны и тележки обеспечивают подвижность картинки и необходимую плавность кадра. Тросовая гиростабилизированная система подвеса с длиной кабельной линии до 100 метров позволяет снимать большие спортивные мероприятия и концерты непосредственно над зрителями.Благодаря оптическим удлинителям сигнала работа операторов проходит на значительном удалении от пультовой. Изображение передается в формате высокой четкости.' }, {title: "blabla"} ];
mixin modal-tackles(tackles) .modal.modal-contact.fade.tackles__modal_(здесь должен быть инкремент)(tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel") .modal-dialog(role="document") .modal-content .modal-header span= tackles.title button.close(type="button",data-dismiss="modal", aria-label="Close") span(aria-hidden="true") x .modal-body
for tackles in modalList +modal-tackles(tackles)


Ответ

Вместо for в данном случае лучше использовать each, так как он позволяет получить индекс текущей итерации.
Далее этот индекс нужно передать в mixin.
Так как классы не поддерживают интерполяцию, класс, который надо собирать динамически нужно перенести в атрибуты.
В итоге должно получиться что-то такое:
for tackles, index in modalList +modal-tackles(tackles, index)
И в mixin:
mixin modal-tackles(tackles, index) .modal.modal-contact.fade(class=`tackles__modal_${index}`, tabindex="-1", role="dialog", aria-labelledby="exampleModalLabel")

Комментариев нет:

Отправить комментарий