理解HAML

Question

をインデントすると、誰かがHAMLコードをインデントする方法を理解した上で私を助けることができる適切 `

.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 

Answer 1

（他の多くのテンプレートのような）HAMLの主な目標は、混乱を減らすことです。それらの括弧と中括弧などは完全に削除されます。しかし、物事の始まりと終わり（コンピュータはスマート、スマートではない）があるときにはそれを伝える必要があるので、代わりにインデントを使用します。あなたがタグ内に何かを書いているときはいつでも、それをインデントしてください！あなたがそのタグで終わったら、インデントしなさい！例えば

：

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

はあなたがタグを開き、任意の時間を

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

となり、次の行がインデントされ、そしてできるだけ早くあなたがそのタグを閉じるように、我々は以上に戻って移動します左。 ifさんと同じこと！

Answer 2

予想されるHTMLを投稿した方が簡単です。

- 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 

が出力：

<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> 

とドキュメント配列が空の場合：

<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> 

haml docsによると：

Rubyのブロック

ここでは一つの可能​​性があります

XHTMLタグのようなRubyブロックは、 Hamlで明示的に閉じる必要はありません。むしろ、インデントに基づいて自動的に閉じられます。 Ruby 評価コマンドの後にインデントが増加するたびにブロックが開始されます（ ）。インデントが減少すると終了します（ のelse節などでない限り）。

if/unless文の後にルビコードでブロックを開始するには、コードインジケータ-からインデントする必要があります。 each（）ステートメントの後ろで別のブロックを開始するには、再度each（）行のコードインジケータ-からインデントする必要があります。ブロックを終了すると、ブロックを開始したコードインジケータ-のレベルに戻るだけです。

要素を作成するhaml行は、前のhaml行が要素を作成した場所を参照するためにを検索します。現在のhaml行がその前のhaml行からインデントされている場合、現在の要素は前の要素の子になります。インデントの量は関係ありません。例えば、each()ブロックで制御するために、私の例では<a> hamlを3回インデントする必要があります。 <a> hamlは#doc.clearfix hamlからいくらかインデントされているため、が作成されます。つまり、<a>タグはその<div>の子になります。