Несколько строк для длинного значения атрибута в Jade/Pug

Как написать длинное значение атрибута по нескольким строкам в Jade/Pug?

Пути SVG имеют тенденцию быть очень длинными. Мы хотим написать значение атрибута по нескольким строкам, чтобы помочь с читабельностью. Например, Mozilla tutorial, написанный в HTML, легко читается.

Любой способ изменить это:

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

в нечто подобное:

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

без запуска ошибки "Неожиданный токен".

Ответ 1

У меня есть эта же проблема, но в контексте knockoutjs. Я использовал обратную косую черту. Ранее:

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

Сейчас:

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

Примечание: обратная косая черта должна немедленно следовать новой строке. Я не уверен, что это "официальный" способ, я просто сделал это и, похоже, сработал. Одним из недостатков этого метода является то, что строки передаются с белым пространством. Таким образом, приведенный выше пример получается как:

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

Это может сделать его непригодным для вашего примера.

Изменить Спасибо Jon. Идея var из вашего комментария, вероятно, лучше, хотя и не идеальна. Что-то вроде:

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

Не уверен, что дополнительные символы стоят сокращения длины строки.

Ответ 2

Я искал ответ на этот вопрос, и я считаю, что вы можете разбить атрибуты нефрита на несколько строк, пропуская конечные запятые.

Исх.

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

Я нашел это сообщение об ошибке: https://github.com/visionmedia/jade/issues/65

Ответ 3

Вы можете сделать это, закрыв строку при разрыве строки, добавив "+", а затем открыв новую строку в строке продолжения.

Вот пример:

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

Ответ 4

Это старый вопрос, но вот более новый ответ.

В моем случае я использую PUG в шаблонах vue в отдельных файловых компонентах. Поэтому для меня работает следующее.

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

то есть. используя строчную интерполяцию ` вместо ' или "