web-dev-qa-db-fra.com

Plusieurs lignes pour la valeur d'attribut longue dans Jade / Pug

Comment écrire une longue valeur d'attribut sur plusieurs lignes dans Jade/Pug?

Les chemins SVG sont généralement très longs. Nous voulons écrire une valeur d'attribut sur plusieurs lignes pour améliorer la lisibilité. Par exemple, Mozilla tutoriel écrit en HTML est facile à lire.

Toute façon de changer cela:

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")

en quelque chose comme ça:

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")

sans déclencher une erreur "Jeton inattendu".

pug
39
Jon Saw

J'ai ce même problème mais dans un contexte knockoutjs. J'ai utilisé la barre oblique inverse comme ça. Précédemment:

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

Maintenant:

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

Remarque: la barre oblique inverse doit être immédiatement suivie d'une nouvelle ligne. Je ne sais pas si c'est la manière "officielle", je viens de le faire et cela semble fonctionner. Un inconvénient de cette méthode est que les chaînes sont ensuite rendues avec l'espace blanc intact. Ainsi, l'exemple ci-dessus est rendu comme suit:

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

Cela pourrait le rendre inutilisable pour votre exemple.

Modifier Merci Jon. L'idée var de votre commentaire est probablement meilleure mais pas toujours idéale. Quelque chose comme:

-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")

Pas sûr que les caractères supplémentaires valent la réduction de la longueur de ligne.

38
Sebastian Carroll

C'est une vieille question mais voici une réponse plus récente.

Dans mon cas, j'utilise PUG in vue modèles dans des composants de fichier unique. Donc, ce qui suit fonctionne pour moi.

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

c'est-à-dire en utilisant une interpolation de chaîne ` au lieu de ' ou "

20
Petur Subev

Je cherchais une réponse à cette question et je pense que vous pouvez briser les attributs de jade sur plusieurs lignes en sautant les virgules de fin.

Ex.

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

J'ai trouvé ce message de validation à ce sujet: https://github.com/visionmedia/jade/issues/65

16
blischalk

Vous pouvez le faire en fermant la chaîne au saut de ligne, en ajoutant un "+", puis en ouvrant une nouvelle chaîne sur la ligne de continuation.

Voici un exemple:

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",
     ...
7
Murphy Randle

J'ai également eu une chaîne comme valeur d'attribut. J'utilise react

 input(
   ...props
   label="Contrary to popular belief, Lorem Ipsum is simply random text. \
      It has roots in a piece of classical Latin literature from 45 BC, \ 
      making it over 2000 years old."
)

dans ton cas...

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",

Notez qu'il y a un espace avant la barre oblique inverse

1
fatahn