1. Mở đầu

Trong Rails, thông thường khi mới khởi tạo 1 project, template engine mặc định là .html.erb, tuy nhiên cách viết HTML thông thường quá dài, gây cản trở quá trình viết code, bảo trì, mở rộng tính năng cho lập trình viên. Bài viết dưới đây sẽ tổng hợp lại một số template khác ngoài ERB và cách sử dụng chúng, từ đó bạn có thể lựa chọn xem template nào phù hợp với project của mình.

2. Các loại template

2.1. Curly

Cài đặt Curly cũng đơn giản như cài đặt các loại gem khác, đơn giản bản chỉ gõ gem install curly-templates hoặc nếu bạn sử dụng bundle thì thêm dòng sau vào Gemfile:

gem 'curly-templates'

Để sử dùng Curly trong view hoặc partial, sử dụng tiền tố .curly thay vì là .erb. Ví dụ : app/views/posts/comment.html.curly. Dựa vào tiền tố .curly, Curly sẽ tìm một presenter class tên là Posts::CommentPresenter. Theo quy ước, file này sẽ được đặt tại app/presenters/, vậy thì trong ví dụ trên thì presenter sẽ có đường dẫn như sau app/presenters/posts/commentpresenter.rb

Dưới đây là ví dụ thực tế về cách sử dụng curly

<!-- app/views/posts/_comment.html.curly -->
<div class="comment">
  <p>
    {{author_link}} posted {{time_ago}} ago.
  </p>

  {{body}}

  {{#author?}}
    <p>{{deletion_link}}</p>
  {{/author?}}
</div>

Các hàm được nội suy trong file .curly sẽ được định nghĩa trong presenter tương ứng

-- app/presenters/posts/comment_presenter.rb
class Posts::CommentPresenter < Curly::Presenter
  presents :comment

  def body
    SafeMarkdown.render(@comment.body)
  end

  def author_link
    link_to @comment.author.name, @comment.author, rel: "author"
  end

  def deletion_link
    link_to "Delete", @comment, method: :delete
  end

  def time_ago
    time_ago_in_words(@comment.created_at)
  end

  def author?
    @comment.author == current_user
  end
end

Qua ví dụ trên ta thấy là điểm mạnh curly đã tách biệt các cấu trúc logic ra khỏi view, khiến cho phần code trong view trở nên gọn gàng hơn rất nhiều.

2.2. Haml

Haml là một template engine cho HTML. Nó được thiết kế để cho việc viết các HTML trở nên dễ dàng hơn, bằng cách loại bỏ những sự dư thừa, phản ánh các cấu trúc cơ bản mà nó đại diện, cung cấp các cú pháp thanh lịch để ta có thể dễ dàng hiểu được. Haml sẽ tập trung rút gọn các cú pháp của html thay vì code ruby

Để cài đặt Haml, đơn giản bạn chỉ cần gõ gem install haml hoặc nếu bạn sử dụng bundle thì thêm dòng sau vào Gemfile:

gem 'haml'

Formatting Phần cơ bản nhất của Haml ià shorthand để tạo HTML:

%tagname{:attr1 => 'value1', :attr2 => 'value2'} Contents

Ví dụ 
%strong= item.title

Chỉ cần dùng %tagname , Haml sẽ tự động xử lý sang html

Thêm class và id dễ dàng hơn, Haml sử dụng giống với syntax css

%tagname#id.class

Ví dụ
%span#button.header

Khi bạn sử dụng thẻ div, nó càng dễ dàng hơn. Bởi vì

 -- foo Hello!
becomes

<div id='foo'>Hello!</div>

%ul
  %li Salt
  %li Pepper
becomes:

<ul>
  <li>Salt</li>
  <li>Pepper</li>
</ul>

%p
  Date/Time:
  - now = DateTime.now
  %strong= now
  - if now > DateTime.parse("December 31, 2006")
    = "Happy new " + "year!"

    h1 Markup examples

    #content
      p This example shows you how a basic Slim file looks.

    == yield

    - if items.any?
      table#items
        - for item in items
          tr
            td.name = item.name
            td.price = item.price
    - else
      p No items found. Please add some inventory.
        Thank you!

    div id="footer"
      == render 'footer'
      | Copyright © #{@year} #{@author}