Jade / Pug 中长属性值的多行答案

【问题标题】：Multiple Lines for Long Attribute Value in Jade / PugJade / Pug 中长属性值的多行
【发布时间】：2013-07-26 04:53:58
【问题描述】：

我们如何在 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")

不会触发“意外令牌”错误。

【问题讨论】：

标签： pug

【解决方案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}">

这可能使其无法用于您的示例。

编辑谢谢乔恩。您评论中的 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")

不确定额外的字符是否值得减少行长。

【讨论】：

您认为将属性分配给变量会更好吗？
例如，- var data = "template: { " // so on...，然后在属性中稍后分配。

【解决方案2】：

这是一个老问题，但这是一个较新的答案。

就我而言，我在单个文件组件的 vue 模板中使用 PUG。所以以下对我有用。

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

即使用字符串插值 ` 而不是 ' 或 "

【讨论】：

是的，有人在使用 VueJS！ :D
谢谢！此外，作为 VueJS 人员的替代方案，您可以使用计算属性：:class="classes"。

【解决方案3】：

我一直在寻找这个问题的答案，我相信您可以通过跳过结尾的逗号将翡翠属性分成多行。

例如

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

我找到了关于它的提交消息：https://github.com/visionmedia/jade/issues/65

【讨论】：

嗨@blischalk，我们正在尝试将单个属性值分成多行，例如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"，使其更具可读性。由于属性短，您在此处的示例可以很容易地分成几行。长的呢？
谢谢@blischalk - 这并没有回答 OP 的问题，但正是我需要的，并首先出现在 Google 上。

【解决方案4】：

您可以通过在换行符处关闭字符串，添加一个“+”，然后在续行上打开一个新字符串来做到这一点。

这是一个例子：

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

【讨论】：

感谢大家的回答。这和接受的答案都很好。接受的答案输入的字符较少，但这不会混淆我的编辑器的玉插件语法突出显示。太糟糕了，我们不能像 coffeescript 一样使用三重 "。

【解决方案5】：

我还有一个字符串作为属性值。我正在使用反应

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

在你的情况下......

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

注意反斜杠前有空格

【讨论】：

【解决方案6】：

尚未提及的一种解决方案是使用数组并将其项目与空格连接：

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',
    ].join(' ')
    fill="green"
    fill-opacity="0.5"
    stroke="black"
    stroke-width="2"
  )

输出（使用 Pug 2.0.4）：

<h3>Arcs</h3>
<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"
    fill="green"
    fill-opacity="0.5"
    stroke="black"
    stroke-width="2"
  ></path>
</svg>

您还可以使用空格以外的其他内容连接数组项，这在某些情况下可能很方便。

【讨论】：

【解决方案7】：

Pug 允许在渲染期间定义模板中可用的 js 函数，因此我使用此功能定义了一个从字符串中删除不需要的空白的函数，然后我将其应用于多行属性字符串以消除不需要的白色生成的html中的空间。这是一个示例哈巴狗模板：

-
    //- function to remove white space from strings, leaving a single space
    var rws_rex = /[\n\r\s\t]+/g
    function rws(ff){
        return ff.replace(rws_rex, ' ');
    }
span.clickable1( onclick=rws(` 
                      $('.selected').removeClass('selected'); 
                      $(this).addClass('selected'); 
                      SA_getPersonDetails('${psn1.personUID}'); 
                      return false; `)
             )  
    | Click for details

结果是

<span class="clickable1" onclick=" $('.selected').removeClass('selected'); $(this).addClass('selected'); SA_getPersonDetails('d1374ea2-2f35-4260-8332-abd7ec2d79b4'); return false; ">Click for details</span>

** 请注意，这会从 javascript 代码中的任何文字值中删除空格，因此如果要保留这些空格，则需要修改正则表达式和函数。在我上面的示例中，如果 psn1.personUID 包含多个连续的空格，它们将被缩减为一个空格。但它适用于大多数类型的属性。

【讨论】：

【解决方案8】：

我找到了更好的方法，它考虑了最终 html 中的空格：

input(type='type' 
      class='block w-full'
      +' pr-12 border-gray-300'
      +' rounded-md focus:ring-indigo-500'
      +' focus:border-indigo-500 sm:text-sm')

【讨论】：