如何呼应哈巴狗环内的一些HTML？

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

产生这个网站：

<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 /图标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>
...