Haml语法：将一行拆分成几行

Question

在我的Rails项目中，我使用HAML作为HTML模板语言。 我想知道是否可以将非常长的一行代码拆分成几行：

%a.open-service{href: '#', data: {
  service_name: service.description,
  balance_type: "coinsurance",
  total: service.a_total_billed - service.a_rejected - service.a_not_covered, 
  discount: service} }

如您所见，我只想要一个带有href和一些data属性的锚点，将其放在一行中可能不太美观。

但是当我按照以上方式操作时，会出现错误：“括号不平衡”。

需要帮助吗？

- benams

---

紧密相关但是针对插入的问题：https://dev59.com/qnM_5IYBdhLWcg3wNwQv - Ciro Santilli OurBigBook.com

Answer 1

根据Haml文档，逗号后面可以添加换行符。因此，以下类似的内容可能有效：

%a.open-service{href: '#', 
                data: { service_name: service.description,
                        balance_type: "coinsurance",
                        total: service.a_total_billed - service.a_rejected - service.a_not_covered, 
                        discount: service} }

- Paul Fioravanti

Answer 2

我相信你可以通过|来实现这个目标。你可以在这里的haml文档中了解更多相关信息。

- Mikhail Nikalyukin

---

这是故意的不协调，但这是打破所有长属性的唯一方法。即第一行包含逗号之前的第一个属性，该属性已经太长了，无法通过代码检查等工具。 - wintersolutions

很不幸，haml.info文档网站已经瘫痪/关闭了一段时间:(所以感谢您提供有关pipe的提示;因为否则很难找到。 - Aaron Wallentine

Answer 3

您可以在逗号后随时换行。因此，如果您有以下内容：

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power), colors: ["#7FC564"], title: 'Últimos 30 dias', library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' }, hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 }, vAxis: { textPosition: 'left', format: '# kWh' } }

首先，您可以在每个逗号处换行，以便得到以下内容：

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]).filter_by_appliance(params[:appliance]).where('start > ?', Time.now - 1.month).group_by_day(:start, format: '%d').sum(:power),
      colors: ["#7FC564"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

然而，第一行太长了！没问题，竖线字符可以指定多行字符串。

它放置在一行的末尾（在一些空格之后），意味着所有以 | 结尾的后续行将被视为与同一行上的内容相同。所以你最终会得到：

%div.panel
  .panel-body
    = column_chart @consumptions.filter_by_meter(params[:meter]) |
      .filter_by_appliance(params[:appliance]) |
      .where('start > ?', Time.now - 1.month) |
      .group_by_day(:start, format: '%d') |
      .sum(:power), |
      colors: ["#7FC456"],
      title: 'Últimos 30 dias',
      library: { chartArea: { left: 60, top: 20, width: '95%', height: '85%' },
      hAxis: { textPosition: 'bottom', textStyle: { fontSize: 12 }, minTextSpacing: 2 },
      vAxis: { textPosition: 'left', format: '# kWh' } |

请注意，即使是多行块中的最后一行也应以| 结尾。

希望这有所帮助！

- Flavio Wuensche

Answer 4

我刚看到这个问题，我也遇到了相同的问题，但是选定的答案对我没有帮助。所以我在Mikhail的答案基础上继续建设。如果您有非常长的属性没有用逗号分隔（例如使用angularjs之类的东西），您可以在每行末尾添加+ |将其拆分为几行（包括此多行块中的最后一行，这是棘手的部分）。

就像这样：

%select{ ng: { model: "my_model_name",
             options: "myitem as myitem.formattedName for myitem in container.item_list() | " + |
                      "without: another_list.item_list()" }}                                    |

您可以在 HAML 文档中阅读关于此的信息。

- Pierre-Adrien

Answer 5

有时，在HAML中使用多行与添加Rails代码无关，因为一些元素需要有大量属性，例如Bootstrap进度条，在一行上看起来非常难看。

这让我很头痛：

.progress
  .progress-bar.progress-bar-striped.progress-bar-success{ |
                  role: "progressbar",                     |
                  aria: {                                  |
                    valuenow: "#{@percent}",               |
                    valuemin: "0",                         |
                    valuemax: "100",                       |
                  },                                       |
                  style: "width: #{@percent}%;" }          |
    = "#{@percent}%"

这是我苦苦寻找的解决方案：

.progress
  .progress-bar { class: "progress-bar-striped progress-bar-success",
                  role: "progressbar",
                  aria: { valuenow: "#{@percent}",
                          valuemin: "0",
                          valuemax: "100", 
                  },
                  style: "width: #{@percent}%;" }
    = "#{@percent}%"

请注意，即使没有竖线，只要前面一行以逗号结尾，并且没有一行以开放括号结尾，都可以实现此操作。

- Okomikeruko