2012-08-08 13 views
8

ich eine einfache Suchformular habe ich will mit Jade implementieren.Jade - Controlling Zeilenumbrüche in der HTML-Ausgabe

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

Der Ausgang wird wiedergegeben als:

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

Dies ist perfekt, außer dass der Zeilenumbruch ist einen Raum zwischen meinem Knopf und der Suchtaste verursacht. Ich brauche keinen Platz zwischen der Textbox und der Schaltfläche. Ich brauche den Code wie folgt zu machen:

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

aber ich dieses Projekt bin mit Code zu erstellen, der in seinem HTML-Formular gelesen werden muß, und kann nicht einfach entfernen Leerraum von meinem Projekt als Ganze .

Gibt es eine Möglichkeit, ich könnte Ausgang meine Form als auch die Beibehaltung weiß Abstand und Zeilenumbrüche in den Rest meines Dokument angezeigt?

Antwort

10

Ich war für die gleiche Sache suchen und über das kam: http://scalate.fusesource.org/documentation/jade-syntax.html

Unter Klartext: Whitespace-Entfernung: > und <

ich mit Leerzeichen ein Problem hatte innerhalb eines <ein> tag:

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

Folge

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

Hinzufügen < bis zum Ende der Zeile:

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

Folge

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

scheint für einige Schlagworte zu arbeiten, z.B. 'blockquote' und' a', wie in Ihrem Beispiel hier, aber Jade v1.11.0 erzeugt Fehler und kompiliert nicht, wenn Sie dies mit 'input' Tags versuchen. FWIW, der obige fusuresource.org-Link funktioniert nicht. Der Doc ist auch verfügbar [hier] (http://scalate.github.io/scalate/documentation/jade-syntax.html#Whitespace_Removal:__code__gt___code__and__code__lt___code_). – matty

2

Wenn dies Jade für Knoten JS können Sie 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 }); 

Sie könnten Ihre Form gebracht Vorlage in einer separaten Datei (z. B. myform.jade) und für diese Vorlage beim Laden oder erstelle einen Helfer für diesen Zweck.

1

Ich hatte auch dieses Problem. locals.pretty wird in der Entwicklung als wahr festgelegt, da ich das gerenderte HTML lesen möchte. Der Abstand zwischen zwei Eingaben würde Stilprobleme verursachen.

Meine aktuelle Lösung ist raw html für diese zwei Eingänge zu verwenden:

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

Dieser mischt ein wenig nicht-Jade Text, sondern macht die Eingänge ohne den zusätzlichen Raum zwischen ihnen. Diese

+1

Sie können das resultierende HTML mit jedem Browser-Inspektor anstelle von Rohcode lesen. –