ruby on rails - rails - Sintaxis de Haml: divide una línea en un par de filas

haml vs pug

Question

Utilizo HAML en mi proyecto de rieles para mis plantillas html. Me gustaría averiguar si es posible dividir una línea muy larga y hacer un par de filas:

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

Como puede ver, solo quiero tener un ancla con href y algunos atributos de datos, y hacer que una línea no sea un código bonito. Pero cuando lo hago como arriba, aparece un error: "Corchetes desequilibrados".

¿alguna ayuda?

Answer 1

A veces, Multiline en HAML puede tener poco o nada que ver con la adición de código de rieles, ya que algunos elementos deben tener muchos atributos, como la barra de progreso de Bootstrap , y simplemente parecer horribles en una línea.

Esto me estaba dando un dolor de cabeza:

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

Y aquí estaba la solución a mi lucha:

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

Tenga en cuenta que incluso sin las líneas de la barra de tuberías, siempre que la línea anterior termine con una coma, y ​​ninguna línea termine con un corchete abierto,

Answer 2

Acabo de llegar a esta pregunta, tenía el mismo problema pero la respuesta seleccionada no me ayudó. Así que estoy construyendo sobre la respuesta de Mikhail. Si tiene atributos muy largos que no están separados por comas (digamos que está usando algo como angularjs), puede dividirlo en varias líneas agregando + | al final de cada línea (incluida la última línea en este bloque multilínea, que es la parte difícil) .

Al igual que esto:

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

Puedes leer sobre esto here .

Answer 3

Creo que puedes lograr esto con la ayuda de | . Puedes leer sobre esto en la documentación de Haml here .

Answer 4

Se pueden colocar nuevas líneas después de las comas, de acuerdo con la documentación de Haml . Entonces, tal vez algo como lo siguiente funcionaría:

%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 5

Siempre puedes romper tu línea después de las comas. Así que si tuvieras esto:

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

En primer lugar, podría romper líneas en cada coma para entrar en esto:

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

Aún así, la primera línea es demasiado grande! No hay problema. El carácter de canalización puede designar una cadena multilínea.

Se coloca al final de una línea (después de algunos espacios en blanco) y significa que todas las siguientes líneas que terminan con | Se evaluarán como si estuvieran en la misma línea. Así que finalmente obtendrás:

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

Tenga en cuenta que incluso la última línea del bloque multilínea debe terminar con |.

¡Espero eso ayude!