javascript - Rails 在使用 cocoon 字段渲染表单时转义 javascript

Question

尝试在表单中使用茧嵌套文件上传字段时遇到问题。表单通过 AJAX 提交，然后使用 update.js.erb 部分重新呈现。

这是我的部分答案及其编辑形式:

li id="answer_#{answer.id}" class=('accepted' if answer.accepted?)
  div.answer-body
    span
      = answer.body
    ul
      - answer.attachments.each do |a|
        li= link_to a.file.identifier, a.file.url

    - if user_signed_in? && current_user.id == answer.user_id
      = link_to 'Delete answer', [@question, answer], remote: true, method: :delete
      = link_to 'Edit answer', {}, class: "edit-answer", href: '#'
    - if user_signed_in? && current_user.id == @question.user_id && !answer.accepted?
      = link_to 'Accept answer', accept_question_answer_url(@question, answer),
                                                    remote: true, method: :patch, class: 'accept-answer', href: '#'
  div.edit-answer-form.conceal
    = form_for [@question, answer], remote: true do |f|
      = f.label :body, 'Edit answer'
      = f.text_area :body
      div.form-group
        = f.fields_for :attachments do |field|
          = render 'attachment_fields', f: field
        .links
          = link_to_add_association "Moar files!", f, :attachments
      = f.submit 'Save', class: 'submit'
      = f.button 'Discard', class: 'discard', type: 'button'

成功提交后将完全重新呈现。

这是 "application/_attachment_fields" 部分:

.nested-fields
  .field
    = f.label :file
    = f.file_field :file
  = link_to_remove_association "Remove this attachment", f

Cocoon 使用 link_to_add 元素中的属性和新字段的蓝图。当我在没有添加新文件的情况下提交此表单时，一切似乎都很好。链接看起来像这样:

<a class="add_fields" data-association="attachment" data-associations="attachments" data-association-insertion-template="&lt;div class=&quot;nested-fields&quot;&gt;
      &lt;div class=&quot;field&quot;&gt;
        &lt;label for=&quot;answer_attachments_attributes_new_attachments_file&quot;&gt;File&lt;/label&gt;&lt;input type=&quot;file&quot; name=&quot;answer[attachments_attributes][new_attachments][file]&quot; id=&quot;answer_attachments_attributes_new_attachments_file&quot; /&gt;
      &lt;/div&gt;
      &lt;input type=&quot;hidden&quot; name=&quot;answer[attachments_attributes][new_attachments][_destroy]&quot; id=&quot;answer_attachments_attributes_new_attachments__destroy&quot; value=&quot;false&quot; /&gt;&lt;a class=&quot;remove_fields dynamic&quot; href=&quot;#&quot;&gt;Remove this attachment&lt;/a&gt;
    &lt;/div&gt;" href="#">Moar files!</a>

当我将新文件添加到表单并提交时，问题就出现了。蓝图中的引号没有被转义，我最终得到了这个链接:

<a class="add_fields" data-association="attachment" data-associations="attachments" data-association-insertion-template="<div class="nested-fields">
      <div class="field">
        <label for="answer_attachments_attributes_new_attachments_file">File</label><input type="file" name="answer[attachments_attributes][new_attachments][file]" id="answer_attachments_attributes_new_attachments_file" />
      </div>
      <input type="hidden" name="answer[attachments_attributes][new_attachments][_destroy]" id="answer_attachments_attributes_new_attachments__destroy" value="false" /><a class="remove_fields dynamic" href="#">Remove this attachment</a>
    </div>" href="#">Moar files!</a>

它弄乱了整个表单并将提交和丢弃按钮从中推出，使其无法提交。

我的 update.js.erb 在每个提交的表单上呈现:

var answer_item = $('#<%= dom_id(@answer) %>');
<% if @answer.errors.any? %>
  answer_item.find('.edit-answer-form').prepend("<%= j render 'shared/error_messages', object: @answer %>");
<% else %>
  answer_item.replaceWith('<%= j(render @answer) %>');
<% end %> 

我确定这不是 cocoon 的问题，因为我之前使用过 nested_form gem，它在相同的概念上有类似的问题，它在那里被称为蓝图。

我尝试使用 raw 方法调用 j，但问题仍然存在。

我很困惑，伙计们。

Answer 1

这是 remoripart problem .

解决方法:

<% if remotipart_submitted? %>
  $('.answers-block').append("<%=  j "#{render(@answer)}" %>");
<% else %>
  $('.answers-block').append("<%=  j render(@answer) %>");
<% end %>