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

时间:2014-06-23 16:04:45

标签: ruby-on-rails ruby html5 erb

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

<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值?它不应该在一个参数范围内吗? 数据哈希?

似乎对数据属性的使用非常合理,但如果我错过了一些明显的东西......我在这里学习:)我们也很感激完成相同任务的其他方法。

TIA

1 个答案:

答案 0 :(得分:2)

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

为什么?

想一想关注点的分离(关注我,这是一个非常高级的抽象):

  • Rails“just”提供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 %>

并且use可以使用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
})