Html5 rails 中的数据属性

Question

我正在使用为我的 rails 项目购买的主题，主题的作者使用 html5 数据属性作为背景图像，代码如下所示

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

我找到了有关如何将数据属性与 rails 一起使用的资源，但它并不适合我。这是我找到的 link http://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-tag

我如何将上述代码转换为在 rails 中工作（我使用 erb 作为模板引擎）

Answer 1

您可以使用相同的标记，但是，您需要使用 RoR 的助手来获取图像的 url - 您可以使用 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">

Answer 2

我认为假设您拥有正确的资产路径，这应该可行：

image_tag("assets/images/banner_1.jpg", class: "jumbotron full-height relative" data-bg-overlay: "black", data-overlay-opacity: '0.5')

Answer 3

此外，对于下面的答案，如果你真的想把它转换成erb模板，你可以这样写：

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

Html5 rails 中的数据属性

Html5 Data attributes in rails

ruby-on-rails

html

ruby-on-rails-4

custom-data-attribute