2012-04-25 13 views
5

Jest to rodzaj skomplikowanej linii HTML do stworzenia w haml:haml - jak mogę stworzyć tę linię HTML

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

Nie jestem pewien, jak to zrobić. Dowolny pomysł? Mogę to zrobić tylko:

%a.btn 
    %span.icon-bar Hello 

, ale nie wiem, jak wykonać złożone czynności.

Dzięki!

Odpowiedz

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

albo

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

, ponieważ w tym wierszu jest zerowy rubin, nie ułatwia to użycia tutaj składni rakietowej hash. '% a.btn.btn-navbar (data-cel =". Nav-collapse "data-toggle =" zwiń ")' jest bardziej pomocny dla węzłów, które nie mają obliczonych wartości atrybutów. – ocodo

+0

Dzięki, @ Syomo! Nie znałem tej składni, ponieważ nie ma jej w dokumentach HAML. Zapewnia najlepszą czytelność. – mwld

+0

Jest w dokumentach, tutaj http://haml.info/docs/yardoc/file.REFERENCE.html#attributes, ale jest omawiany jako wtórny do stylu mieszania ruby. (nie ma własnej kotwicy) Po prostu znajdź na stronie "Atrybuty stylu HTML" – ocodo

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

Tylko czytając stronę haml ...

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

** Nie testowałem tego, po prostu ją przeczytać na stronie internetowej

+1

Nie tego nie zrobiłem. Zrobiłem to, aby zrobić to dobrze:% a.btn.btn-navbar {: data => {: target => ".nav-collapse",: toggle => "collapse"}} – GeekedOut

9

Wiele klas może być tylko chained together :

%a.btn.btn-navbar 

podaje:

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

Custom data attributes można określić za pomocą jednego :data hash:

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

daje:

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

+1 za pokazanie jak unikaj wpisywania "danych" dla każdego atrybutu danych! – 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

Liczba znaków nie jest miarą wszystkich rzeczy. – ocodo

+1

Wiem, dlatego "Moja ulubiona metoda" nie jest najtańszą opcją. Jednak mniej kodu do przeczytania na całej twojej podstawie kodu często sprawi, że będzie szybciej czytać, szybciej pisać i mniej RSI skłania do twojej kariery (chociaż nie mierzyłem naciśnięć klawiszy). Jestem pewien, że ktoś uzna te informacje za przydatne. Zwłaszcza ci, którzy nie są świadomi dostępnych alternatywnych składni. – Gerry

Powiązane problemy