Pug/Jade - wejście jest elementem samozamykającym: <input/>, ale zawiera treść zagnieżdżoną?

Question

Chcę utworzyć html tak:

<label class="radio-inline"> 
    <input type="radio" name="hidden" checked="" value="Visible"> Visible 
</label> 

Mops/Jade

label.radio-inline 
    input(type="radio", name="hidden", value="0", checked="") Visible 

ale pojawia się błąd:

input is a self closing element: but contains nested content.

Co to oznacza? Jak mogę to naprawić?

Answer 1

Istnieje wiele sposobów, aby to zrobić przy użyciu Jade/Pug. Pierwszym sposobem jest użycie char rury (co wymaga nowej linii):

input 
    | text 

Drugim sposobem jest użycie interpolacji Tag (i można zatrzymać się na tej samej linii):

#[input] text 

więc alternatywą Jethro odpowiedź byłaby:

label.radio-inline 
    #[input(type='radio', name='hidden', value=0, checked='')] Visible 

pamiętać, że można jeszcze zrobić:

label #[input] text 

które będą generować:

<label> 
    <input/> text 
</label> 

Answer 2

Musisz do niego tak:

label.radio-inline 
    input(type='radio', name='hidden', value=0, checked='') 
    | Visible 

Umieszczenie Visible na tej samej linii co input sprawia, mops interpretować ją jako wewnętrzną HTML elementu input.

Answer 3

wierzę, że to nonsens, aby umieścić input wewnątrz znacznika label, czy nie? można po prostu zrobić

label(for="ya") Visible 
input(id="ya", type="radio", name="hidden", value=0, checked="") 

który daje doskonale oznaczony przycisk radiowy w zgodzie z nowoczesną web standards.