如何将 Rails 代码添加到 div 标签中的 id 属性？答案

【问题标题】：How can I add rails code to id attribute in div tag?如何将 Rails 代码添加到 div 标签中的 id 属性？
【发布时间】：2019-05-29 11:52:49
【问题描述】：

我想做这样的事情：<div id="<%=service.name%>"

但是，我就是无法让它工作。我需要帮助！我正在尝试为单击的每个按钮创建一个模态，但仅在 html.erb 中的模态 div 上。

要使模态框工作，它们需要具有相同的 ID。

<% @services.each do |service| %>

<div class="card">
<a class="card-b" href="#" data-toggle="modal" data-target="# <%=service.name%> ">
</div>

<div class="modal" id=" <%=service.name%> " tabindex="-1" role="dialog" aria-hidden="true">
Hello this is the modal.
</div>

<% end %>

我想在ID标签中使用rails代码，不知道是否可以？

编辑：

我尝试了最佳答案，但它仅适用于一些模态，而其余的则无效。然后我在我的表中添加了一个modal_tag 列，所有模式都有效。谢谢！

我的代码现在是id="<%=service.modal_tag%>

【问题讨论】：

删除data-target和id中的空格。同样对于id 的工作，名称必须是唯一的，否则如下所述使用数据库id 代替（保证是唯一的）。还要确保关闭锚标记
"在 HTML 元素上指定时，id 属性值在元素树中的所有 ID 中必须是唯一的，并且必须包含至少一个字符。该值不能包含任何空格字符。 " - W3C HTML 5.2

标签： ruby-on-rails ruby bootstrap-4

【解决方案1】：

我的偏好是使用 SecureRandom.hex 或 __id__ 之类的唯一值，正如 engineersmnky 指出的那样，而不是使用模型 ID。代码看起来像这样：

# You may also have to require 'securerandom' within your rails app 
# (can't remember if that comes in automatically or not)
<% @services.each do |service| %>
  <!-- Either option for random_id works below -->
  <% random_id = SecureRandom.hex %> 
  <% random_id = service.__id__ %>

  <div class="card">
    <a class="card-b" href="#" data-toggle="modal" data-target="#<%= random_id %>">
  </div>

  <div class="modal" id="<%= random_id %>" tabindex="-1" role="dialog" aria-  hidden="true">
    Hello this is the modal.
  </div>
<% end %>

我喜欢这个的原因是它不会泄漏数据库 ID（如果这是您关心的事情），并且如果此模式嵌入到其他页面中，您不太可能发生 id 冲突。

给定一个简单的基准测试脚本，看起来__id__ 是两个选项中性能更高的一个：

$ cat unique_id.test.rb
require 'securerandom'
require 'benchmark'

n = 100_000
Benchmark.bm do |x|
  x.report { n.times do |n|  ; SecureRandom.hex; end }
  x.report { n.times do |n|  ; n.__id__ ; end }
end

$ ruby unique_id.test.rb
   user     system      total        real
   0.180000   0.000000   0.180000 (  0.176293)
   0.000000   0.000000   0.000000 (  0.005554)

【讨论】：

那为什么要生成hex呢？ _service.__id__ 不会泄漏数据库 ID，并且可能是唯一的，因为我怀疑 Service 是一个不可变的实习对象
@engineersmnky 从未想过使用底层对象 ID。根据文档：no two active objects will share an id 所以它也可以正常工作。
HTML id 必须以字母开头，你知道的。但是您可以轻松地为您生成的 ID 添加某种前缀，例如“service-”。
@Nate 不正确。根据Spec“id 属性指定其元素的唯一标识符 (ID)。对于 ID 可以采用的形式没有其他限制；特别是，ID 可以仅由数字组成，以数字开头，以下划线开头，仅包含标点符号等。”
@engineersmnky 这只适用于 HTML5。在此之前，我的说法是正确的。 OP 没有说明他们使用的是 HTML4 还是 5，所以我发表了评论。此外，一些文章会建议您仍然以字母开头以实现向后兼容性。此外，添加前缀将有助于防止 OP 已经担心的 ID 冲突。

【解决方案2】：

Ruby on Rails 有一个 dom_id method 来生成唯一的 id 以在 HTML 文档中使用。此外，我不喜欢混合 HTML 标签和 ERB——因此我可能会使用辅助方法

# in a helper
def service_modal(service, &block)
  tag.div(class: 'card') do
    tag.a(class: 'card-b', data: {toggle: 'modal', target: dom_id(service) }, href: '#')
  end +

  tag.div(class: 'modal', dom_id(service), tabindex: 1, role: 'dialog', 'aria-hidden': 'true') do
    capture(&block)
  end
end

并像这样使用它

# in the view
<% @services.each do |service| %>
  <%= service_modal(service) do %>
    Hello this is the modal.
  <% end %>
<% end %>

【讨论】：

我完全不知道dom_id 方法。很高兴学习一个新技巧。
直到！这也是一个很好的解决方案。它会泄漏数据库标识符，但对于大多数用例来说是最合适的。
@GavinMiller 这是真的。但这应该不是问题，因为 Rails 无论如何都会在 URL 中泄漏数据库标识符。如果您使用像 friendly_id 这样的 gem 或自己重写 to_param 方法以避免这种行为，那么您也应该考虑重写 to_key。

【解决方案3】：

另外，您可以使用object_id。

Rails： data-target="#<%= service.object_id %>">

基准测试：

   user     system      total        real
0.071505   0.000187   0.071692 (  0.072017) #SecureRandom.hex
0.004685   0.000016   0.004701 (  0.004727) #__id__
0.004500   0.000001   0.004501 (  0.004503) #object_id

【讨论】：

基准测试可能有点误导，因为__id__ 和object_id 是同一个内部调用的别名