How to do an if/else in HAML without repeating indented code

筅森魡賤 提交于 2019-12-03 10:19:26
!!!
 - @user = "jed" #=> stubbing out an instance
%html
  %head
    - string = defined?(@user) ? "#{@user}" : nil #=> for demo only, wrap this in a helper method
    %title{'data-account' => string}
  %body
    =yield

I don't think that you can avoid the indentation issue, because of the way HAML autoassigns the "end" statement, but you can instead push the if statement into the body tag itself -

%body{:data_account => (defined? @user ? @user.account : nil)}

as opposed to

%body(data-account="#{@user.account}")

Not super-pretty, but less ugly than repeating the entire block!

HAML's elegant solution is helpers

class ApplicationHelper...

  def body_for_user(user, &blk)
    return content_tag(:body, :'data-account' => user.account, &blk) if user
    content_tag(:body, &blk)
  end

end

The ternary operators described above are more than sufficient for this particular situation, but for more complex things, break out the helpers.

Oh, to use this, in your view change %body(...) to = body_for_user @user do

Write a helper like this:

def body_attributes
  {}.tap do |hash|
    hash[:data] = {}
    hash[:data][:account] = @user.account if @user
    # add any other attributes for the body tag here
  end
end

Then call the helper from the body element:

%body{ body_attributes }
  %h1 Welcome
  -# all my content

For anybody looking for an answer to the Ruby if/else issue with HAML this is how I worked around it:

%tr{ id: (line_item == @current_item) ? "current_item" : nil }
  %td= button_to '-', decrement_line_item_path(line_item), method: :put, remote: true
  %td #{line_item.quantity}×
  %td= line_item.product.title
  %td.item_price= number_to_currency(line_item.total_price)

I usually set the @@menu variable at the controller, then in bootstrap-enabled layout.haml I define:

  ...
  %body
    .navbar.navbar-fixed-top
      .navbar-inner
        .container
          %a.btn.btn-navbar{"data-target" => ".nav-collapse", "data-toggle" => "collapse"}
            %span.icon-bar
            %span.icon-bar
            %span.icon-bar
          %a.brand{:href => "/"} AwesomeApp
          .nav-collapse
            %ul.nav
              %li{:class => @@menu == 'home' && :active}
                %a{:href => "/"} Home
              %li{:class => @@menu == 'about' && :active}
                %a{:href => "/about"} About
              %li{:class => @@menu == 'contact' && :active}
                %a{:href => "/contact"} Contact

when I set @@menu to 'about' it will render:

  <body>
    <div class='navbar navbar-fixed-top'>
      <div class='navbar-inner'>
        <div class='container'>
          <a class='btn btn-navbar' data-target='.nav-collapse' data-toggle='collapse'>
            <span class='icon-bar'></span>
            <span class='icon-bar'></span>
            <span class='icon-bar'></span>
          </a>
          <a class='brand' href='/'>AwesomeApp</a>
          <div class='nav-collapse'>
            <ul class='nav'>
              <li>
                <a href='/'>Home</a>
              </li>
              <li class='active'>
                <a href='/about'>About</a>
              </li>
              <li>
                <a href='/contact'>Contact</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!