2012-08-08 52 views
8

Tengo un formulario de búsqueda simple que deseo implementar usando Jade.Jade - Control de saltos de línea en la salida HTML

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

La salida se representa como:

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

Esto es perfecto, excepto que la ruptura del verso está causando un espacio entre mi botón y el botón de búsqueda. No necesito espacio entre el cuadro de texto y el botón. Necesito el código para hacer de esta manera:

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

Sin embargo estoy usando este proyecto para crear código que tendrá que ser leído en su formulario HTML, y no puede sencilla espacio en blanco Sacar de mi proyecto en su conjunto .

¿Hay alguna manera de que pueda dar salida a mi formulario como se indica, conservando el espacio blanco y el salto de línea en el resto del documento?

Respuesta

10

que estaba buscando lo mismo y me encontré con esto: http://scalate.fusesource.org/documentation/jade-syntax.html

Bajo Texto sin formato: Remoción Los espacios en blanco: > y <

que estaba teniendo un problema con los espacios en blanco dentro de un < una etiqueta >:

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

resultó en

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

Adición < hasta el final de la línea:

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

resultó en

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

Esto parece funcionar para algunas etiquetas, p. 'blockquote' y' a', como en su ejemplo aquí, pero Jade v1.11.0 produce errores y no compilará al intentar esto con las etiquetas 'input'. FWIW, el enlace de fusesource.org no funciona. El documento también está disponible [aquí] (http://scalate.github.io/scalate/documentation/jade-syntax.html#Whitespace_Removal:__code__gt___code__and__code__lt___code_). – matty

2

Si esto es Jade para el nodo JS puede 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 }); 

Se puede poner su formulario plantilla en un archivo separado (por ejemplo: myform.jade) y establecer de bonito a falso para esa plantilla cuando carga, o crea un ayudante para este mismo propósito.

1

También tuve este problema. locals.pretty se establece en verdadero en desarrollo ya que quiero leer el html renderizado. El espacio entre dos entradas causaría un problema de estilo.

Mi solución actual es utilizar HTML prima para que las dos entradas:

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

Esta mezcla un poco de texto no-jade, sino que hace las entradas sin el espacio extra entre ellos.

+1

Puede leer el HTML resultante con cualquier navegador Inspector en lugar de código sin formato. –

Cuestiones relacionadas