pug - Jade/Pug 中的多行长属性值

Question

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

不会触发“意外 token ”错误。

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

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