Question

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

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

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

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

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

我和他们一样困惑。

Answer 1

这是remoripart problem。

解决方案：

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

当使用cocoon字段渲染表单时，Rails会转义javascript

1 个答案: