Best Way to Use HTML5 Data Attributes with Rails Content_Tag Helper

Best way to use html5 data attributes with rails content_tag helper?

Rails 3.1 ships with built-in helpers:

http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

E.g.,

tag("div", :data => {:name => 'Stephen', :city_state => %w(Chicago IL)})
# => <div data-name="Stephen" data-city-state="["Chicago","IL"]" />

Using my own HTML5 data attributes in a Rails link_to helper

Apparently when using this format, I needed to specify the controller and action in a hash.

<%= link_to "Login", {:controller => "access", :action => "login"}, 'data-placement' => 'below' %>

Rails - link_to helper with data-* attribute

Just pass them in... Rails has a default :data hash

= link_to body, url, :data => { :foo => 'bar', :this => 'that' }

One gotcha - you must surround symbols with quotes if they include a dash:

:data => { :'foo-bar' => 'that' }

Update: In Rails 4, underscores are automatically converted to dashes, so you can do this:

:data => { :foo_bar => 'that' }

Alternatively you can just write it directly:

= link_to body, url, :'data-foo' => 'bar', :'data-this' => 'that'

Update 2: As pointed out in the comments, Ruby 1.9+ allows this syntax, which is now the preferred formatting:

{ data: { foo: "bar" } }

Html5 Data attributes in rails

You can use the same markup, however, you need to use RoR's helpers to get the image's url - you can use image_path:

   <section class="jumbotron full-height relative"
      data-pages-bg-image="<%= image_path('images/banner_1.jpg') %>"
      data-bg-overlay="black"
      data-overlay-opacity="0.5">

Display yes/no with content_tag helper by boolean

This (or something like it) will do the trick:

def boolean_for(bool = false)
 style     = ['danger', t('No')]
 pill_text = 'No'
 if [true, 'true', 1, '1'].include?(bool)
   style     = ['success', t('Yes')]
   pill_text = 'Yes'
 end
 content_tag(:span, pill_text, class: "badge badge-pill badge-%s"% style).html_safe
end 

Or if you want to use your locale file like you are for the styles:

def boolean_for(bool = false)
 style     = ['danger', t('No')]
 pill_text = t('No')
 if [true, 'true', 1, '1'].include?(bool)
   style     = ['success', t('Yes')]
   pill_text = t('Yes')
 end
 content_tag(:span, pill_text, class: "badge badge-pill badge-%s"% style).html_safe
end 

Data attributes inside a link_to helper method in Rails

Something like this should work

<%= link_to image_path("portfolio-05-1170x600.jpg"), data: { 'photo-swipe-item' => "", 'size' => '1170x600' } do %>
  <%= image_tag("portfolio-05-570x420.jpg", alt: "", :size => "570x420") %>
<% end %>

Ruby on Rails content_tag options hash - setting a boolean html attribute?

Put the following content into an initializer called config/initializers/boolean_attributes.rb

# add any other boolean attributes to the %w() below to make them work like checked.
BOOLEAN_ATTRIBUTES = %w(itemscope).to_set
BOOLEAN_ATTRIBUTES.merge(BOOLEAN_ATTRIBUTES.map {|attribute| attribute.to_sym })
ActionView::Helpers::TagHelper::BOOLEAN_ATTRIBUTES.merge(BOOLEAN_ATTRIBUTES)

Et Voila! Restart Rails and you should be good to go. I don't know how to make the thing just add a blank attribute, just how to make it work like checked, disabled, readonly, etc...

---

Related Topics