4

How do I do this in HAML when i have HTML 5 Data attributes without value

<p class="title" data-section-title><a href="#mypanel">Panel</a></p>

I have done this, but HAML raises an error

%p{ class: "title", data: { section: {:title}}}= link_to "Panel", "#mypanel"

Thanks

Glend Maatita
  • 623
  • 7
  • 14
  • 2
    How about a blank string? `data: { section: { title: "" } }`. Is `data-section-title` actually different than `data-section-title=""`? – Kyle Truscott Jul 29 '13 at 01:14
  • The spec doesn't seem to say anything about using custom data attributes in the boolean way. My belief is that would be invalid. In the pure HTML way, what value does the dataset contain for such an attribute? You could try {:title => nil}, or {:title => true}. –  Jul 29 '13 at 01:17
  • @KyleTruscott i havent tried it. Actually, I got a HTML template based on Zurb Foundation from my designer with that HTML 5 data attributes. The template works well. and i want to convert my template to HAML. I'm afraid if your trick will cause errors. I think it is different than data-section-title="" – Glend Maatita Jul 29 '13 at 01:28
  • @Nate yap, i dont find any clues in HAML's reference page – Glend Maatita Jul 29 '13 at 01:29
  • Yeah, based on that question @BenjaminSinclaire referenced, you may be able to use `{ title: true }` – Kyle Truscott Jul 29 '13 at 01:38
  • `{:title}` isn't a valid hash. You can't have a hash with an element, they're made out of keys and values. – user229044 Jul 29 '13 at 02:37
  • yess, its amazingly works using { title: true } . Thanks alot everyone :) – Glend Maatita Jul 29 '13 at 12:01

1 Answers1

10

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
Charles
  • 379
  • 2
  • 14
  • It's easier to read it this way: `%tag{'data-foo-bar' => true}` – SpyroSoft Jan 31 '17 at 18:54
  • 1
    The given answer works, but it produces an HTML attribute with value. If you want the attribute only to be output on HTML, without value, you can use the HTML-style attributes syntax of HAML ([here the reference](http://haml.info/docs/yardoc/file.REFERENCE.html)): `%p(data-section-title){ class: "title" }= link_to "Panel", "#mypanel"` – Andrea Salicetti Jun 27 '18 at 10:09