Как мне отобразить некоторый HTML в цикле мопса?

Question

Я пытаюсь сделать это с pug 2.0.3:

- var myCode = "<i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i>";
- var i = 0;

while i < 10
  !{myCode}
  i++

Я ожидаю, что содержимое myCode будет скомпилировано в HTML десять раз, но вместо этого я получаюэта ошибка: unexpected text "!{myC"

Как мне заставить pug отображать неэкранированный html внутри цикла?

Answer 1

Этот мопс должен справиться с задачей, и вот кодовая ручка с ним вживую (вы должны проверить, используя инструменты dev, чтобы увидеть, что он делает, так как нет видимых элементов).

Этот мопс:

- var i = 0
while i < 10
  div(class='hidden-' + i)
  div
    i.icon.fa.fa-heart(aria-hidden='true' data-aos='zoom-in')
  - i++

Создает этот html:

<div class="hidden-0"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-1"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-2"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-3"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-4"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-5"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-6"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-7"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-8"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
<div class="hidden-9"></div>
<div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>

Если вы хотите, чтобы div с иконкой i / находился внутри скрытого div-X, тогда просто сделайте отступ, как этот:

- var i = 0
while i < 10
  div(class='hidden-' + i)
    div
      i.icon.fa.fa-heart(aria-hidden='true' data-aos='zoom-in')
  - i++

Который производит это:

<div class="hidden-0">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-1">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-2">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-3">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-4">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-5">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-6">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-7">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-8">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>
<div class="hidden-9">
  <div><i class="icon fa fa-heart" aria-hidden="true" data-aos="zoom-in"></i></div>
</div>

Answer 2

Рабочий цикл:

while i < 10
    div(class="hidden-" + i++)
    div !{myCode}

Я не смог найти способ "тихо" перебрать i, поэтому мне пришлось создать для этого фиктивный класс.

Скомпилированный HTMLвыглядит так:

<div class="hidden-0"></div>
<div><i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i></div>
<div class="hidden-1"></div>
<div><i class='icon fa fa-heart' aria-hidden='true' data-aos='zoom-in'></i></div>
...