在 Rails 中有效使用 HTML5 数据属性答案

【问题标题】：Effectively using HTML5 data attribute in Rails在 Rails 中有效使用 HTML5 数据属性
【发布时间】：2014-06-23 16:04:44
【问题描述】：

我有这个应该代表分面搜索的表单：

<form action="<%= foobar_path %>">
  <div class="container-data">
    <span class="search_all" data-facet="all">Tutto</span>
    <span class="search_author" data-facet="author">Autore</span>
    <span class="search_category" data-facet="category">Categoria</span>
    <span class="search_isbn" data-facet="isbn">ISBN</span>
  </div>
  <input type="submit" name="Submit" value="Invia" class="search_submit">
</form>

我如何使用 Ruby 获取 RubyOnRails 中的 data-facet 值？它不应该在参数的 data 散列中吗？

似乎是对数据属性的一种非常合法的使用，但如果我遗漏了一些明显的东西......我来这里是为了学习:) 完成相同任务的替代方法也值得赞赏。

TIA

【问题讨论】：

对于“在 RubyOnRails 中获取数据方面的值”，您需要在 javascript 上使用一些客户端逻辑实现。 Ruby 存在于您的服务器中，无法从客户端获取您想要的数据。

标签： ruby-on-rails ruby html erb

【解决方案1】：

您不应该在 Ruby/Rails 的服务器端“获取数据属性”。您在 Rails 中设置这些值。

为什么？

考虑分离关注点（忍受我，这是一个非常高级的抽象）：

Rails “只是”提供 HTML 和 Javascript 文件
HTML 定义了您要呈现的内容的结构
Javascript 定义了不同事物的行为
使用数据属性，您可以获得一种简单且标准化的方法来参数化行为，而无需将值硬编码到您的 Javascript 中

由于您在生成 HTML 代码（即生成数据属性）时处于控制之中，因此您只需编写通用 Javascript 并利用数据属性的参数化。

在您的表单示例中，您仍将使用基本输入字段，如下所示：

<%= form_tag url: foobar_path do %>
  <div class="container-data">
    <%= text_field_tag :all, placeholder: 'Tutto' %>
    <%= text_field_tag :author,   data: { facet: 'autocomplete', url: authors_path(format: :json) }, placeholder: 'Autore' %>
    <%= text_field_tag :category, data: { facet: 'autocomplete', url: categories_path(format: :json) }, placeholder: 'Categoria' %>
    <%= text_field_tag :isbn,     data: { facet: 'isbn' }, placeholder: 'ISBN' %>
  </div>
  <%= submit_tag 'Invia', class: 'search_submit' %>
<% end %>

并且使用可以使用data-facet 属性来初始化某种附加行为，例如自动完成或格式验证（我承认这是一个构造示例）：

$(document)
.on('change keyup', '[data-facet="isbn"]', function(event){
  var value = $(this).val() // e.g. validate 
})
.on('change keyup', '[data-facet="autocomplete"]', function(event){
  var value = $(this).val(),
      url = $(this).data('url') // use `url` to fetch auto completion suggestions
})

【讨论】：