2012-08-08 8 views
8

Ho un semplice modulo di ricerca che desidero implementare usando Jade.Jade - Interruzione di riga di controllo nell'output HTML

form 
    input(
     type="text" 
     size="16" 
     placeholder="Enter your keywords") 
    input(
     type="button" 
     value="Search") 

L'uscita viene reso come:

<form> 
     <input type="text" size="16" placeholder="Enter your keywords"> 
     <input type="button" value="Search"> 
</form> 

Questo è perfetto, tranne che la linea-break sta causando uno spazio tra il mio pulsante e il pulsante di ricerca. Non ho bisogno di spazio tra la casella di testo e il pulsante. Ho bisogno del codice per rendere in questo modo:

<form> 
     <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search"> 
</form> 

Tuttavia Sto usando questo progetto per creare il codice che dovrà essere letto nella sua forma HTML, e non può semplice rimuovere lo spazio bianco del mio progetto nel suo complesso .

C'è un modo per emettere il mio modulo come indicato, pur mantenendo la spaziatura bianca e il line-breaking nel resto del mio documento?

risposta

10

che stavo cercando la stessa cosa e sono imbattuto in questo: http://scalate.fusesource.org/documentation/jade-syntax.html

Sotto Testo normale: Rimozione Spazio bianco: > e <

ho avuto un problema con uno spazio all'interno di un < un tag >:

a.external(href={"http://foo.bar/" + reference.dxLink.get}) 
    |CrossRef 

provocato

<a href="http://foo.bar/10.1002/rmv.439"> 
        CrossRef 
</a> 

Aggiunta < alla fine della linea:

a.external(href={"http://foo.bar/" + reference.dxLink.get})< 
    |CrossRef 

provocato

<a href="http://foo.bar/10.1002/rmv.439">CrossRef</a> 
+1

Questo sembra funzionare per alcuni tag, ad es. 'blockquote' e' a', come nel tuo esempio qui, ma Jade v1.11.0 produce errori e non verrà compilato quando si prova con i tag 'input'. FWIW, il link fusesource.org qui sopra non funziona. Il documento è anche disponibile [qui] (http://scalate.github.io/scalate/documentation/jade-syntax.html#Whitespace_Removal:__code__gt___code__and__code__lt___code_). – matty

2

Se questa è la Jade per Node JS è possibile force jade to remove or add whitespace with the 'pretty' paramater

var jade = require('./../') 
    , path = __dirname + '/whitespace.jade' 
    , str = require('fs').readFileSync(path, 'utf8') 
    , fn = jade.compile(str, { filename: path, pretty: true }); 

Si potrebbe mettere il modulo template in un file separato (es: myform.jade) e imposta pretty a false per quel template quando carichi, o creare un aiutante per questo stesso scopo.

1

Ho anche avuto questo problema. locals.pretty è impostato su true in fase di sviluppo poiché desidero leggere l'html renderizzato. Lo spazio tra due input causerebbe problemi di stile.

mia soluzione attuale è quella di utilizzare l'HTML grezzo per quei due ingressi:

form 
    <input type="text" size="16" placeholder="Enter your keywords"><input type="button" value="Search"> 

Questa mescola un po 'di testo nessuno-giada, ma rende gli ingressi, senza lo spazio aggiuntivo tra di loro.

+1

È possibile leggere l'HTML risultante con qualsiasi Inspector del browser anziché codice raw. –