Empty Attribute with Ruby Haml

Empty attribute with Ruby HAML

Using something like

%div{:itemscope => true}

is the correct way to specify this in your Haml file.

How this is rendered depends on how you set Haml's format option. The default in Haml 3.1 is xhtml, and with that it will render as itemprop='itemprop', which is valid xhtml. To render with minimized attributes (like <div itemscope>) you need to set the format to html4 or html5. (In Rails 3 the default is html5, and in Haml 4.0 the default is html5).

How to set the Haml options depends on how you are using it, see the options section in the docs.

For example, using Haml directly in Ruby, this:

engine = Haml::Engine.new '%div{:itemscope => true}'
puts engine.render

produces the default xhtml with full attributes:

<div itemscope='itemscope'></div>

But this:

engine = Haml::Engine.new '%div{:itemscope => true}', :format => :html5
puts engine.render

produces the desired result with minimized attributes:

<div itemscope></div>

HTML 5 Data attributes without value in HAML

I just finished writing this out for a project I'm working on. I couldn't find it within the foundation docs.

.large-12.columns
.section-container.auto{:data => {'section' => true}} 
    %section
        %p.title{:data => {'section-title' => true}} 
            %a{:href=>"#panel1" } Section 1
        .content{:data => {'section-content' => true}}  
            %p Content of section 1
    %section
        %p.title{:data => {'section-title' => true}}
            %a{:href=>"#panel2" } Section 2
        .content{:data => {'section-content' => true}}  
            %p Content of section 2

How to add attribute for HAML block?

You're missing a comma between the target link and the options hash. Try this

= link_to '#', { class: 'btn btn-primary' } do
  = image_tag 'image_url'

Haml multiline for really long html attribute

Using | works okay for me:

%a.pull-right{ href: "#", "data-html" => "true", rel: "tooltip",
  "data-placement" => "left", title: "This is really just so much text. |
  The real thing goes on and on and on, much longer than this. It also  |
  contains some line breaks.<br><br>We'd really like to be able to wrap |
   it around so it's readable in the code." }                           |

Output:

<a class='pull-right' data-html='true' data-placement='left' href='#' rel='tooltip' title="This is really just so much text. The real thing goes on and on and on, much longer than this. It also  contains some line breaks.<br><br>We'd really like to be able to wrap it around so it's readable in the code."></a>

Note that even the last line needs to have the pipe character at the end of it.

Also, you might need to change the <br>s to \n to get new lines to work properly in the browser.

---

Related Topics