如何将 .erb 插入数据目标参数 | Ruby 在 Rails
How to insert .erb into a data-target parameter | Ruby on Rails
我有一个 bootstrap(3.3) 折叠用于回复我的 rails 应用程序中的个人评论。
崩溃的问题是 data-target
和 aria-controls
需要对每个评论都是唯一的。出现这种情况是因为留下的每个评论都将静态值设置为第一个评论 (data-target="#collapse1"
)
我试过使用像下面这样的一些 ERB
来插入一个唯一值来代替“1”,这样它就可以成为每个评论的唯一折叠。
不幸的是,这没有用:data-target="<%= '#collapse#{@comment.id}' %>"
我怀疑的尝试也没有:data-target=<%= "#collapse#{@comment.id}" %>
工作。
我不知道我是否只是遗漏了一些关于 ERB
的完全明显的东西,或者这是否真的不是 practical/possible 和 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>
应该是这样的:
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-target='<%= "#collapse#{@comment.id}" %>'
或者更简单的方法
data-target="#collapse#{@comment.id}"
data-target="<%= '#collapse#{@comment.id}' %>"
不会引发错误,因为根据单引号,ERB 标记中的表达式呈现为 "plain" 字符串。
在 ERB 模板中,您可以像添加任何其他数据属性一样添加任何数据属性,data-target="<%= "#collapse#{@comment.id}" %>"
应该可以工作,如果您确定 @comment 不为 nil 并且可以 return 它的 id。
我有一个 bootstrap(3.3) 折叠用于回复我的 rails 应用程序中的个人评论。
崩溃的问题是 data-target
和 aria-controls
需要对每个评论都是唯一的。出现这种情况是因为留下的每个评论都将静态值设置为第一个评论 (data-target="#collapse1"
)
我试过使用像下面这样的一些 ERB
来插入一个唯一值来代替“1”,这样它就可以成为每个评论的唯一折叠。
不幸的是,这没有用:data-target="<%= '#collapse#{@comment.id}' %>"
我怀疑的尝试也没有:data-target=<%= "#collapse#{@comment.id}" %>
工作。
我不知道我是否只是遗漏了一些关于 ERB
的完全明显的东西,或者这是否真的不是 practical/possible 和 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>
应该是这样的:
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-target='<%= "#collapse#{@comment.id}" %>'
或者更简单的方法
data-target="#collapse#{@comment.id}"
data-target="<%= '#collapse#{@comment.id}' %>"
不会引发错误,因为根据单引号,ERB 标记中的表达式呈现为 "plain" 字符串。
在 ERB 模板中,您可以像添加任何其他数据属性一样添加任何数据属性,data-target="<%= "#collapse#{@comment.id}" %>"
应该可以工作,如果您确定 @comment 不为 nil 并且可以 return 它的 id。