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

Question

我有这个表格应该代表一个分面搜索：

<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值？它不应该在params的数据哈希中吗？

似乎对数据属性的合理使用，但如果我遗漏了一些明显的东西......我在这里学习:)也可以通过其他方式完成相同的任务。

TIA

Answer 1

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

为什么？

想一想关注点的分离（请耐心等待，这是一个非常高级的抽象）：

• Rails“只是”提供HTML和Javascript文件
• HTML定义了您想要呈现的内容的结构
• Javascript定义了不同事物的行为
• 使用数据属性，您可以轻松，标准化地参数化行为，而无需将硬编码值添加到Javascript中

由于您在生成HTML代码（即生成数据属性）时可以控制，因此您可以编写通用Javascripts并将参数化用于数据属性。

---

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

<%= 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
})