html - 自闭标签后的 Jade 内容

Question

我正在将一些 HTML 从预先存在的应用程序转换为 Jade。我有一个看起来像这样的 HTML block :

<div class="checkbox">
  <label>
    <input type="checkbox" name="data[day][sunday]" value="sunday">
  Sunday
  </label>
</div>

对应的 Jade 是什么？理想情况下，它看起来像这样:

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    Sunday

但是因为 input 是一个自闭标签，所以我不能在它后面加上文本“Sunday”

我用另一种完全符合我需要的方式编写这个没有问题，但我想知道如何准确地解决这个问题。

谢谢!

Answer 1

可以使用jade中的|来解决这个问题。

| 之后的任何文本都将被解释为父级中的文本

div(class="checkbox"):
  label 
    input(type="checkbox" name="data[day][sunday]" value="sunday") 
    | Sunday

你也可以像这样使用非自闭标签

div
  div
    span hello there
  | and plain text

将产生这样的 html

<div>
  <div>
    <span>hello there</span>
  </div>
  and plain text
</div>

请记住，在 Jade 中直接编写 HTML 是完全有效的，您也可以像这样解决这个问题。

div(class="checkbox"):
  label.
    <input type="checkbox" name="#{data[day][sunday]}" value="sunday"> 
    Sunday

Jade 中标记后的 . 会将所有内容视为文本。