Haml语法：将一条线分成几行

我在我的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和一些数据属性的锚点，并使其成为一行不会是一个漂亮的代码。 但是，当我像上面那样做时，我得到一个错误：“不平衡的括号。”

任何帮助？

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} } 

Answer 2

我相信你可以在|的帮助下实现这一目标 。 您可以在haml文档中阅读它。

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' } | 

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

希望能帮助到你！

Answer 4

我刚刚遇到这个问题，我遇到了同样的问题，但选定的答案对我没有帮助。 所以我只是建立在米哈伊尔的答案之上。 如果你有很长的属性没有用逗号分隔（比如说你使用的是angularjs之类的东西），你可以通过添加+ |将它分成几行+ | 在每一行的末尾（包括此多行块中的最后一行，这是棘手的部分） 。

像这样 ：

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

您可以在HAML文档中阅读相关内容。

Answer 5

有时HAML中的Multiline与添加rails代码几乎没有任何关系，因为一些元素需要具有很多属性，例如Bootstrap Progress Bar ，并且在一行上看起来很可怕。

这让我很头疼：

 .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}%" 

请注意，即使没有管线，只要前一行以逗号结尾，并且没有以开放括号结束的行，