HAML - làm thế nào để tạo ra dòng này của HTML

Question

Đây là loại một dòng phức tạp của HTML để tạo trong HAML:

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

Tôi không chắc chắn làm thế nào để làm điều đó. Bất kỳ ý tưởng? Tôi chỉ có thể thực hiện việc này:

%a.btn 
    %span.icon-bar Hello 

nhưng không chắc chắn cách thực hiện các công việc phức tạp.

Cảm ơn!

Answer 1

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

HOẶC khác

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

Answer 2

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

Chỉ cần từ việc đọc các trang web HAML ...

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

** Tôi đã không kiểm tra này, tôi chỉ đọc nó trên trang web

Answer 3

Nhiều lớp học chỉ có thể chained together :

%a.btn.btn-navbar 

cung cấp:

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

Custom data attributes có thể được xác định với một :data băm duy nhất:

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

cho:

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

Answer 4

/ 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"}}