Question

我正在尝试使用哈巴狗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"

如何让哈巴狗在循环中回显一些未转义的html？

Answer 1

这个哈巴狗应该可以解决问题，并且here's a codepen可以实时使用（由于没有可见元素，因此您必须使用开发人员工具来检查它的作用）。

这个哈巴狗：

- 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>

如果您希望将带有i / icon的div放在隐藏的X div内，则只需像这样缩进即可：

- 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>
...

如何在哈巴狗循环中回显一些HTML？

2 个答案: