2012-04-25 33 views
5

Esto es un poco complicado una línea de HTML para crear en HAML:HAML - ¿cómo puedo crear esta línea de HTML

<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse"> 

No estoy seguro de cómo hacerlo. ¿Alguna idea? Solo puedo hacer esto:

%a.btn 
    %span.icon-bar Hello 

pero no estoy seguro de cómo hacer las cosas complejas.

Gracias!

Respuesta

18
%a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"} 

o bien

%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}} 
+5

, ya que hay cero rubí en esta línea, no ayuda a la legibilidad utilizar la sintaxis del cohete hash aquí. '% a.btn.btn-navbar (data-target =". Nav-collapse "data-toggle =" collapse ")' es más útil para los nodos que no tienen valores de atributo calculados. – ocodo

+0

Gracias, @Slomojo! No sabía esa sintaxis ya que no está en los documentos de HAML. Proporciona la mejor legibilidad. – mwld

+0

Está en los documentos, aquí http://haml.info/docs/yardoc/file.REFERENCE.html#attributes pero se discute de forma secundaria al estilo de hash de ruby. (no tiene su propio anclaje) Solo haga una búsqueda en la página de "Atributos de estilo HTML" – ocodo

-1
%a{:class => "btn btn-navbar", :data-toggle => "collapge", :data-target => ".nav-collapse"} Hello 

Sólo a partir de la lectura de la página web HAML ...

http://haml-lang.com/tutorial.html

** no he probado esto, acabo de leer en la página web

+1

No, esto no lo hizo. Lo hice para que funcione bien con esto:% a.btn.btn-navbar {: data => {: target => ".nav-collapse",: toggle => "collapse"}} – GeekedOut

9

múltiples clases solo pueden ser chained together :

%a.btn.btn-navbar 

gives:

<a class='btn btn-navbar'></a> 

Custom data attributes se puede especificar con una sola :data de hash:

%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}} 

da:

<a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'></a> 
+2

+1 para mostrar cómo ¡evite escribir 'data-' para cada atributo de datos! – antinome

3
/ 80 characters (Chandrakant's anser): 
%a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"} 

/79 characters (Matt's answer): 
%a.btn.btn-navbar{:data => {:toggle => 'collapse', :target => '.nav-collapse'}} 

/69 characters (My fave method): 
%a.btn.btn-navbar(data-toggle="collapse" data-target=".nav-collapse") 

/68 characters (Ruby >= 1.9): 
%a.btn.btn-navbar{data: {toggle:"collapse", target:".nav-collapse"}} 
+4

el recuento de caracteres no es la medida de todas las cosas. – ocodo

+1

Lo sé, por eso "Mi método favorito" no es la opción de caracteres más baja. Sin embargo, un código menor para leer todo su código base a menudo hará que sea más rápido de leer, más rápido de escribir y menos inducción de RSI a lo largo de su carrera (aunque no estaba midiendo pulsaciones de teclas). Estoy seguro de que alguien encontrará útil esta información. Especialmente aquellos que no conocen las sintaxis alternativas disponibles. – Gerry

Cuestiones relacionadas