¿Cómo hacer atributos de datos con Haml y Rails?

4 minutos de lectura

Avatar de usuario de Michael Durrant
Michael Durrant

yo puedo tener

%a{href: '#', data_toggle_description_length: 'toggle_me_ajax'}

que me da guiones bajos no guiones, es decir

<a href="#" data_toggle_description_length="toggle_me_ajax"></a>

Sin embargo, quiero tener HTML data- atributos, es decir

<a href="#" data-toggle-description-length="toggle_me_ajax"></a>

pero cuando trato de reemplazar guiones bajos con guiones, es decir

%a{href: '#', data-toggle-description-length: 'toggle_me_ajax'}

Me sale errores de sintaxis:

/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected tLABEL
...data-toggle-description-length: 'toggle_me_ajax')}>\n    tog...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected ')', expecting '}'
...ption-length: 'toggle_me_ajax')}>\n    toggleMeAjax\n  </a>\...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unknown regexp options - pa
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $undefined
... toggleMeAjax\n  </a>\n</span>\n", -1, false);::Haml::Util.h...
...                               ^
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: unterminated string meets end of file
/home/durrantm/Dropnot/webs/rails_apps/linker/app/views/links/_links.html.haml:13: syntax error, unexpected $end, expecting '}'

Avatar de usuario de Mandeep
Mandeep

Prueba esto:

%a{"data-toggle-description-length" => "toggle_me_ajax", href: "#"}

O

%a{href: "#", :data => {:toggle_description_length => "toggle_me_ajax"}}

Para más detalles consulte aquí

También puedes usar convertidor html2haml disponible en linea

EDITAR:

Como se menciona en los comentarios, hay un par de sintaxis más que funcionarían

 %a{href: "#", { "data-toggle-description-length": "toggle_me_ajax" }}

O

%a{href: "#", { :"data-toggle-description-length" => "toggle_me_ajax" }}

Todavía preferiría los dos primeros, aunque creo que los últimos se ven feos y un poco desordenados.

  • +1 Buena captura! Sí, parece que los rieles convertirán el guión bajo en un guión para la segunda forma. Me gusta esa segunda forma, así que me alegro de poder usarla.

    –Michael Durrant

    22 de junio de 2014 a las 17:40


  • ¿Alguna razón para no usar la sintaxis hash más nueva allí? (parece estar bien para los casos que estoy intentando).

    –Michael Durrant

    22 de junio de 2014 a las 17:41


  • @MichaelDurrant ambos generarán el mismo html, así que realmente no creo que importe. Solo pensé que debería escribir en ambos sentidos para que puedas elegir tú mismo

    – Mandeep

    22 de junio de 2014 a las 17:44

  • Otra opción sería utilizar el Atributos de estilo HTML: %a(href= '#' data-toggle-description-length: 'toggle_me_ajax'). También convertir guiones bajos en guiones bien puede ser la norma en el futuro, no solo para hashes anidados como lo es actualmente: github.com/haml/haml/issues/782.

    – mate

    22/06/2014 a las 22:40

  • También: { “data-toggle-description-length”: “toggle_me_ajax” } o incluso { :”data-toggle-long-data-attribute” => “tickle_me_elmo” } si te gustan los cohetes.

    – Un fader oscuro

    23 de junio de 2015 a las 11:38

Realmente no hay mucha necesidad de usar { ... } estilo en haml. Los atributos de estilo HTML son una forma más flexible y natural de generar html.

%a(href="#" data-toggle="target") my link

No se requieren comas, cohetes hash, etc. También puede interpolar muy fácilmente o asignar directamente variables sin cambiar de estilo.

p.ej

%a(href=link data-toggle="#{id}-toggle")

Dónde link y id son variables del ámbito enlazado actualmente.

En particular, también puede incluir sin problemas atributos de xmlns, la generación de svg usa muchos prefijos de espacio de nombres, por ejemplo:

%link(xlink:type="simple" xlink:href=link)

No hay ninguna razón de peso para usar otro estilo.

  • Because there are no commas separating attributes, though, more complicated expressions aren’t allowed. For those you’ll have to use the {} syntax de haml.info/docs/yardoc/file.REFERENCE.html#htmlstyle_attributes_

    – Ing. Hasanuzzaman Sumon

    28 de marzo de 2016 a las 8:24

  • Sus plantillas no deben tener expresiones complejas, agrega problemas innecesarios durante el mantenimiento de la aplicación.

    – ocodó

    28 de marzo de 2016 a las 8:45

  • No estoy seguro de por qué esta no es la respuesta aceptada. Esto es mucho mejor que usar la sintaxis de uso general de Ruby para la tarea específica de establecer atributos HTML. A pesar de todo lo que está mal con HTML, la sintaxis de atributos no es realmente un problema.

    – Andrew Koster

    18 de agosto de 2019 a las 4:38

  • @AndrewKoster principalmente porque la respuesta llegó más de un año después del original. Tenga en cuenta que la respuesta aceptada ahora tiene 67 votos, por lo que no estoy seguro de si debería cambiarla de todos modos

    –Michael Durrant

    27 sep 2021 a las 15:17

Algo como esto debería funcionar muy bien:

%a{ "data-user-id" => "#{@user.id}" }

¿Ha sido útil esta solución?