Tìm hiểu gem Haml

Haml là "template engine" cho Html, giúp cho việc viết code html nhanh và đẹp và dễ hơn, giúp giảm thời gian khi ta phát triển hệ thống.

Để sử dụng Haml với Rails, chỉ cần thêm Haml vào Gemfile của bạn và chạy nó.

gem 'haml'

Haml 5 sẽ đòi hỏi Rails phiên bản 4.0 hoặc cao hơn. Nếu bạn đang sử dụng Rails 3.x, bạn nên sử dụng phiên bản 4.0.x Haml:

gem 'haml', '~> 4.0.5'

Giả sử chúng ta đã có table Category, và ta sẽ làm 1 view để new 1 category cho table Category đó:

# app/view/categories/new.html.haml

%h1 New Category
= form_for @category do |f|
 %h4 Name
 %div#name-category.field
   = f.text_area :title

 %h4 Content
 %div{class: ["field"]}
   = f.cktext_area :content

   = f.submit "Post", class: "btn btn-large btn-primary"

Thay vì save file đuôi dạng html.erb thì ta save bằng đuôi .html.haml để Haml có thể convert thành code html để sinh ra view cho người dùng (có thể vừa dùng file html.haml hoặc html.erb trong cùng folder đều được, miễn là không cùng tên với nhau ) có thể dễ dàng thấy có 2 kiểu để bắt đầu 1 dòng code đó là dùng dấu % và dấu = - Dấu % là thông báo rằng đây là dòng code cho Html ví dụ:

%h1 New Category
# => <h1>New Category</h1>
---------------------------------
%div#name-category.field
# => <div id="name-category" class="field"> </div>
----------------------------------
%div{class: ["field", "second-field"], id: ""}
# => <div class="field, second-field"></div>

Để sinh ra html với các thẻ id, class đầy đủ - dấu "=" và chỉ ra đây là đoạn code bằng ruby và sẽ đc show ra ở view (còn nếu bạn muốn đoạn code bằng ruby mà không hiện ở view thì dùng dấu "-") ví dụ:

= form_for @category do |f|     # => <%= form_for @category do |f| %>
 %h4 Name
 %div#name-category.field
   = f.text_area :title     #=> <%= f.text_area :title %>

 %h4 Content
 %div{class: ["field"]}
   = f.cktext_area :content

   = f.submit "Post", class: "btn btn-large btn-primary"

Thông thường khi dùng form_for trong rails phải có end nhưng trong này không có thấy lý do bởi vì:

Gem Haml xác định giới hạn của 1 đoạn code dựa theo số tab căn lề trái của nó. Ví dụ: tất cả các dòng code có tab > 2 thì sẽ nằm trong thằng có tab =2, cho tới khi có thằng tab = 2 kế tiếp đc gọi đến.