CODEWITHSUNDEEP
ruby-on-railsrubyhaml
Duron Epps
Duron Epps

Reputation: 1

Understanding Haml Indenting

Can someone help me with understanding how to indent haml code properly `

.wrapper_with_padding
#docs.clearfix
 - unless @docs.blank
  - @docs.each do |doc|
   %a{ href: (url_for [doc])}
     .doc
     %p.title= doc.title
     %p.date= time_ago_in_words(doc.created_at)
     %p.content= truncate(doc.content, length:50)

  - else
 %h2 Create Doc!
 %p Start Creating Documents and Organizing your life!
 %button= link_to "Create Doc", new_doc_path

Upvotes: 0

Views: 1533

Answers (2)

7stud
7stud

Reputation: 48599

It would be easier if you posted your expected html. Here is one possibility:

- docs = %w[google.com yahoo.com apple.com]

.wrapper_with_padding
  #docs.clearfix
  - unless docs.empty?
    - docs.each do |doc|
      %a{ href: (doc) } link text
      .doc
        %p.title= "some title"
        %p.date=  "some date"
        %p.content= "some content"

  - else
    %h2 Create Doc!
    %p Start Creating Documents and Organizing your life!
    %button{href: "http://www.example.com"} Create Doc

output:

<div class='wrapper_with_padding'>
  <div class='clearfix' id='docs'></div>
  <a href='google.com'>link text</a>
  <div class='doc'>
    <p class='title'>some title</p>
    <p class='date'>some date</p>
    <p class='content'>some content</p>
  </div>
  <a href='yahoo.com'>link text</a>
  <div class='doc'>
    <p class='title'>some title</p>
    <p class='date'>some date</p>
    <p class='content'>some content</p>
  </div>
  <a href='apple.com'>link text</a>
  <div class='doc'>
    <p class='title'>some title</p>
    <p class='date'>some date</p>
    <p class='content'>some content</p>
  </div>
</div>

And if the docs array is empty:

<div class='wrapper_with_padding'>
  <div class='clearfix' id='docs'></div>
  <h2>Create Doc!</h2>
  <p>Start Creating Documents and Organizing your life!</p>
  <button href='http://www.example.com'>Create Doc</button>
</div>

According to the haml docs:

Ruby Blocks

Ruby blocks, like XHTML tags, don’t need to be explicitly closed in Haml. Rather, they’re automatically closed, based on indentation. A block begins whenever the indentation is increased after a Ruby evaluation command. It ends when the indentation decreases (as long as it’s not an else clause or something similar).

So to start a block in ruby code after an if/unless statement, you need to indent from the - code indicator. And to start another block after the each() statement, once again you have to indent from the - code indicator for the each() line. When you are done with the block, you just outdent back to the level of the - code indicator that started the block.

A haml line that creates an element looks up to see where the previous haml line is that created an element. If the current haml line is indented from that previous haml line, then the current element becomes a child of the previous element--it doesn't matter how much the indentation is. For instance, the <a> haml needs to be indented three times in my example in order to be controlled by the each() block. And because the <a> haml is indented some amount from the #doc.clearfix haml, which creates a <div>, that means the <a> tag will be a child of that <div>.

Upvotes: 3

XML Slayer
XML Slayer

Reputation: 1561

The main goal of Haml (like many other templates) is to reduce clutter; all those brackets and braces and whatnot are completely removed. But you still have to tell it when things begin and end (computers are smart, they're not that smart), so we use indentation instead. Any time you're writing something within a tag, indent it! When you're done with that tag, unindent!

For example:

<p>This is a <small>very small</small> paragraph</p>Yay!

becomes

%p
  This is a
  %small
    very small
  paragraph
Yay!

Any time you open a tag, the following line is indented, and as soon as you close that tag, we move back over to the left. Same thing with ifs!

Upvotes: 2

Related Questions