如何将 .erb 插入数据目标参数 | Ruby on Rails

Posted 2023-05-08

【中文标题】如何将 .erb 插入数据目标参数 | Ruby on Rails

【英文标题】：How to insert .erb into a data-target parameter | Ruby on Rails

【发布时间】：2018-12-01 10:47:56

【问题描述】：

我有一个 bootstrap(3.3) 崩溃，用于回复我的 rails 应用程序中的单个 cmets。 崩溃的问题是 data-target 和 aria-controls 对于每条评论都必须是唯一的。出现这种情况是因为留下的每条评论都保留了设置为第一条评论的静态值 (data-target="#collapse1")

我尝试使用类似下面的ERB 来插入一个唯一值来代替“1”，这样它就可以成为每个评论的唯一折叠。

不幸的是，这不起作用：data-target="<%= '#collapse#@comment.id' %>"

我对@9​​87654326@ 的可疑尝试也没有奏效。

我不知道我是否只是遗漏了关于 ERB 的一些完全明显的东西，或者这对于 Rails 是否真的不实用/不可能。

如果这更适合 javascript 或 Jquery，请告诉我。 （如果可以的话，请帮助我！）

提前感谢您与我分享这次糟糕的经历。

编辑： 这是我要操作的以下代码：

<button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Reply</button>
<div class="collapse" id="collapse1">
  <%= simple_form_for([comment, Comment.new]) do |f| %>
  <%= render 'shared/error_messages', object: f.object %>
    <%= f.input :body, :as => :text, input_html:  maxlength: 300 , label: false, placeholder: "What are your thoughts?", class: "form-control", wrapper_html:  id: 'contactTextarea'  %>
    <%= f.input :name, label: false, placeholder: "Name (required)", class: "form-control" %>
    <%= f.input :email, label: false, placeholder: "Email Address (required) - This is not displayed with the comment", class: "form-control" %>
    <%= f.submit "Reply", class: "btn btn-success" %>
  <% end %>
</div>

---

纯 HTML 编辑：

<div class="wellington top-drop">
  <h3 class="title-top align-left">Name</h3>
  <div style="clear: both;"></div>
  <p class="nobot align-left">Good stuff!</p>
  <button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="#collapse11" aria-expanded="false" aria-controls="#collapse11">Reply</button>
  <div class="collapse" id="#collapse11">
    <form novalidate="novalidate" class="simple_form new_comment" id="new_comment" action="/comments/11/comments" accept-charset="UTF-8" method="post"><input name="utf8" type="hidden" value="✓"><input type="hidden" name="authenticity_token" value="[token]">

      <div id="contactTextarea" class="form-group text required comment_body"><textarea class="form-control text required" maxlength="300" placeholder="What are your thoughts?" name="comment[body]" id="comment_body"></textarea></div>
      <div class="form-group string required comment_name"><input class="form-control string required" placeholder="Name (required)" type="text" name="comment[name]" id="comment_name"></div>
      <div class="form-group email required comment_email"><input class="form-control string email required" placeholder="Email Address (required) - This is not displayed with the comment" type="email" name="comment[email]" id="comment_email"></div>
      <input type="submit" name="commit" value="Reply" class="btn btn-success" data-disable-with="Reply">
    </form>
  </div>
  <div style="clear: both;"></div>
</div>

最终编辑（工作代码）：

<button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="<%= "#collapse#comment.id" %>" aria-expanded="false" aria-controls="<%= "collapse#comment.id" %>">Reply</button>
<div class="collapse" id="<%= "collapse#comment.id" %>">
  <[reply form]>
</div>

【问题讨论】：

因为你是@comment 是 nil

你在哪里定义@comment，你确定不是comment？

在纯 HTML 中，现在呈现的是什么？

你收到#collapse11，应该是什么？

@Jake 你现在已经走了很远，你的问题是要插入 data-attributes 参数。它不起作用，因为它可能是由您的 JS 引起的。您是否检查了所有内容，而不仅仅是您的 HTML 内容？

【参考方案1】：

data-target="<%= '#collapse#@comment.id' %>" 不会引发错误，因为 ERB 标记中的表达式按照单引号呈现为“普通”字符串。

在 ERB 模板中，您可以像添加任何其他数据属性一样添加任何数据属性，data-target="<%= "#collapse#@comment.id" %>" 应该可以工作，如果您确定 @comment 不是 nil 并且可以返回其 id。

【讨论】：

您提供的第一种方法不会引发任何错误，但不会让任何按钮切换任何折叠。请注意;我也将此包含在我的崩溃 id 字段中。

它不会引发任何错误，因为它是一个“完整的”字符串，因为没有双引号，它不会被插值，你会看到相同的 @987654324 @。试试第二种方法。检查元素，查看（在此处复制/粘贴）你得到了什么。

抱歉，您是对的，您是对的，问题出在我的每个aria-controls=" " 和div id=" " 的复制/粘贴工作中

【参考方案2】：

你可以的

data-target='<%= "#collapse#@comment.id" %>'

或者更简单的方法

data-target="#collapse#@comment.id"

【参考方案3】：

应该是这样的：

data:  target: "#collapse<%=@comment.id%>" 

和评论一样，询问如何正确格式化或者我认为他想再添加一个data-attribubtes，你可以在属性之前或之后添加它，像这样：

data:  target: "#collapse<%=@comment.id%>", toggle: "value-here" 

或

data:  toggle: "value-here", target: "#collapse<%=@comment.id%>" 

这是您发布的上述代码：

<button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1">Reply</button>

我认为你希望它是这样的：

<button type="button" class="btn btn-xs btn-success align-right" data-toggle="collapse" data-target="#collapse<%=@comment.id %>" aria-expanded="false" aria-controls="collapse<%=@comment.id%>">Reply</button>

如果你希望它使用 Rails erb 格式，它可以是这样的：

<%= button_tag "Name of your Button", class: "btn btn-xs btn-success align-right", data: toggle: "collapse", target: "#collapse<%=@comment.id %>", expanded: "false", "aria-controls": "collapse<%=@comment.id%>" %>

【讨论】：

我如何正确地设置多个data 属性的格式？如：data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse1"

@Jake 你可以在目标之后或之前添加它。我会为你更新我的答案。但是，我是否正确回答了您的问题？

@Jake 你不能在data: 中添加aria-expanded，你可以做的是用qoutes 包裹它。 "aria-expanded": "false"

@Jake，答案已更新。我希望你得到正确的答案。

你检查你的JS了吗？折叠不是 HTML 工作。