html - escape - haml sintax
HAML-parámetro con guión (3)
¿Cómo puedo convertir esta línea?
<body data-spy="abcd">
a la sintaxis HAML?
Este me devuelve un error.
%body{:data-spy => "abcd"}
Para el compilador de rubíes HAML:
%div{data: {some_hyphenated_id: ''value''}}
y HAML convierte automáticamente los guiones bajos a guiones, así que obtengo:
<div data-some-hyphenated-id="value"></div>
Para tu información: si necesitas un atributo vacío, usa true lugar de ''value''
Ejemplo:
Haml:
%div{data: {topbar: true}}
%div{data: {image_carousel: true}}
HTML:
<div data-topbar></div>
<div data-image-carousel></div>
Para ser más específicos, esta sintaxis es válida para la gema ruby haml , así como para gruñir la tarea con el language establecido en ruby (requiere la mencionada gema rubl haml instalada)
No sé por qué no publiqué esto en primer lugar. La forma "correcta" de escribir su etiqueta, <body data-spy="abcd"> , en HAML, es omitir el {} completo y usar () :
%body(data-spy="abcd")
Si no estás evaluando los valores de los atributos como Ruby, no deberías usar la sintaxis {:key => value} en absoluto. Manténgase en (key="value") para los atributos HTML estáticos.
Respuesta original:
HAML tiene una sintaxis específica para trabajar con atributos de datos que la respuesta de CrazyVipa resume muy bien.
En aras de la integridad, señalaré que también puede usar la sintaxis de los símbolos entre comillas, tanto aquí como en cualquier otro lugar de Ruby que desee usar un guión en un símbolo:
%body{ :"data-spy" => "abcd" }
En general, :"text" es equivalente a "text".to_sym , lo que permite que su símbolo contenga caracteres que normalmente no podría debido a las limitaciones del analizador. Los siguientes son todos los símbolos válidos:
:"symbol with spaces"
:"symbol-with-hyphens"
:"symbol
with
newlines"
:"def my_func(); puts ''ok''; end"
Tenga en cuenta que los símbolos entre comillas no funcionarán con la nueva sintaxis hash de Ruby 1.9:
{ :"key-1" => "value" } # works in 1.8/1.9
{ "key-1": "value" } # syntax error
Sintaxis HAML para el campo de datos HTML5:
%div{ :data => {:id => ''555''} }
Ahora, comencé a jugar, y parece que esto solo funciona con "datos"; otras etiquetas deben ser:
%div{ "star-datas" => "hello!" }
Tu ejemplo
%body{:data => { :spy => ''abcd''}}