Più righe per valore di attributo lungo in Jade/Pug

Question

Come scrivere un valore di attributo lungo su più righe in Jade/Pug?

I percorsi SVG tendono ad essere molto lunghi. Vogliamo scrivere un valore di attributo su più righe per facilitare la leggibilità. Ad esempio, lo tutorial di Mozilla scritto in HTML è facile da leggere.

un modo per cambiare questo:

h3 Arcs 
svg(width="320px", height="320px") 
    path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10", 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5") 

in qualcosa di simile a questo:

h3 Arcs 
svg(width="320px", height="320px") 
    path(d="M10 315 " + 
    "L 110 215 " + 
    "A 30 50 0 0 1 162.55 162.45 " + 
    "L 172.55 152.45 " + 
    "A 30 50 -45 0 1 215.1 109.9 " + 
    "L 315 10", 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5") 

senza far scattare un "token imprevisto" errore.

Answer 1

Ho lo stesso problema ma in un contesto di knockoutjs. Ho usato il backslash in questo modo. precedenza:

div(data-bind="template: {name: 'ingredient-template', data: $data}") 

Ora:

div(data-bind="template: {\ 
    name: 'ingredient-template',\ 
    data: $data}") 

Nota: Il backslash deve essere seguito immediatamente da un ritorno a capo. Non sono sicuro che questo sia il modo "ufficiale", l'ho fatto e sembra funzionare. Uno svantaggio di questo metodo è che le stringhe vengono quindi visualizzate con lo spazio bianco intatto. Quindi l'esempio precedente viene visualizzato come:

<div data-bind="template: {     name: 'ingredient-template',     data: $data}"> 

Ciò potrebbe renderlo inutilizzabile per il tuo esempio.

Modifica Grazie Jon. L'idea var dal tuo commento è probabilmente migliore anche se non ancora ideale. Qualcosa di simile:

-var arg = "M10 315 " 
-arg += "L 110 215 " 
-arg += "A 30 50 0 0 1 162.55 162.45 " 
-arg += "L 172.55 152.45 " 
-arg += "A 30 50 -45 0 1 215.1 109.9 " 
-arg += "L 315 10" 
h3 Arcs 
    svg(width="320px", height="320px") 
    path(d=arg, 
    stroke="black", fill="green", 
    stroke-width="2", fill-opacity="0.5") 

Non sono sicuro che i caratteri extra valgano la riduzione della lunghezza della linea.

Answer 2

Ho cercato una risposta a questo e credo che si possano rompere gli attributi di giada su più righe saltando le virgole finali.

Es.

aside                    
    a.my-link(               
    href="https://foo.com"           
    data-widget-id="1234567abc")           
    | Tweets by @foobar 

ho trovato questo messaggio di commit su di esso: https://github.com/visionmedia/jade/issues/65

Answer 3

Puoi farlo chiudendo la corda alla linea-break, l'aggiunta di un '+', e quindi l'apertura di una nuova stringa sulla riga di continuazione .

Ecco un esempio:

path(d="M10 315 L 110 215 A 30 50 0 0 1 162.55 162.45 L 172.55" + 
     " 152.45 A 30 50 -45 0 1 215.1 109.9 L 315 10", 
    foo="etc", 
    ... 

Answer 4

Questa è una vecchia questione, ma qui è una risposta più recente.

Nel mio caso sto usando PUG nei modelli di vue in componenti a singolo file. Quindi il seguente funziona per me.

<template lang='pug'> 
    .day(:class=`{ 
    'disabled': isDisabled, 
    'selected': isSameDay, 
    'in-range': isInRange, 
    'today': isToday, 
    'weekend': isWeekend, 
    'outside-month': isOutsideMonth }`, 
    @click='selectDay' 
) {{label}} 
</template> 

, ad es.utilizzando stringa di interpolazione ` invece di ' o "