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

Question

我有一个bootstrap（3.3）折叠，用于回复Rails应用程序中的个人评论。 崩溃的问题是data-target并且每个注释的aria-controls必须唯一。 之所以如此，是因为每个注释都保留设置为第一个注释的静态值（ data-target="#collapse1" ）

我尝试使用如下所示的一些ERB来插入一个唯一值来代替“ 1”，因此它可以是每个注释的唯一折叠。

不幸的是，这没有用： data-target="<%= '#collapse#{@comment.id}' %>"

我的以下令人怀疑的尝试也没有成功： data-target=<%= "#collapse#{@comment.id}" %> 。

我不知道我是否只是缺少一些有关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>

Answer 1

应该是这样的：

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%>" %>

Answer 2

你可以做

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

或更简单的方法

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

Answer 3

data-target="<%= '#collapse#{@comment.id}' %>"不会引发错误，因为根据单引号，ERB标记内的表达式表示为“普通”字符串。

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