Question

我创建了一个表单，允许用户通过单击“文本”或“Url”按钮动态添加嵌套表单字段。可以添加文本或URL字段的任何排列（也可以删除它们）。

提交表单后，内容将显示在视图模板中。但是，当我在/ posts / id / edit编辑帖子时，帖子内容不会出现在编辑模板中 - 它是一个空白页面。

SQL Log http://i.stack.imgur.com/B2ueq.png

发布模型

class Post < ActiveRecord::Base
 has_many :things, dependent: :destroy
 accepts_nested_attributes_for :things
end

事物模型

class Thing < ActiveRecord::Base
 belongs_to :post
end

模式

create_table "posts", force: :cascade do |t|
 t.datetime "created_at", null: false
 t.datetime "updated_at", null: false
end

create_table "things", force: :cascade do |t|
 t.text     "text"
 t.string   "url"
 t.integer  "post_id"
end

帖子控制器

class PostsController < ApplicationController

def edit
 @post = Post.includes(:things).find(params[:id])
end 

def update
end

new.html.erb

<button id='addtext'>text</button>
<button id='addurl'>url</button>

<%= form_for @post, url: posts_path, html: { multipart: true } do |f| %>

 <%= f.fields_for :thing do |ff| %>
 <% end %> 
 <%= f.submit %>
<% end %>

edit.html.erb

<button id='addtext'>text</button>
<button id='addurl'>url</button>

<%= form_for @post, url: posts_path, html: { multipart: true } do |f| %>

 <%= f.fields_for :thing do |ff| %>
 <% end %> 
 <%= f.submit %>
<% end %>

posts.coffee

删除字段

jQuery ->
 $('form').on 'click', '.remove_fields', (event) ->
 $(this).prev('input[type=hidden]').val('1')
 $(this).closest('div').remove()
 event.preventDefault()

添加字段（新模板）

 current_index = 0

addText = ->
 html = """
  <div>
  <textarea placeholder="Write something..." name="post[things_attributes][#{current_index}][text]" id="post_things_attributes_#{current_index}_text"></textarea>
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
  </div>
 """

 $("#new_post input[type='submit']").before(html)
 current_index += 1

$ ->
  $('#addtext').on('click', addText)


  current_index = 0

addUrl = ->
 html = """
  <div>
  <input placeholder="http://www..." type="url" name="post[things_attributes][#{current_index}][url]" id="post_things_attributes_#{current_index}_url">
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
   </div>
   """

  $("#new_post input[type='submit']").before(html)
   current_index += 1

$ ->
  $('#addurl').on('click', addUrl)

添加字段（编辑模板）

     current_index = 0

editText = ->
 html = """
  <div>
  <textarea placeholder="Write something..." name="post[things_attributes][#{current_index}][text]" id="post_things_attributes_#{current_index}_text"></textarea>
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
  </div>
 """

 $(".edit_post input[type='submit']").before(html)
 current_index += 1

$ ->
  $('#edittext').on('click', editText)


editUrl = ->
 html = """
  <div>
  <input placeholder="http://www..." type="url" name="post[things_attributes][#{current_index}][url]" id="post_things_attributes_#{current_index}_url">
  <input type="hidden" name="post[things_attributes][#{current_index}][order]" id="post_things_attributes_#{current_index}_order" value="#{current_index}" />
  <input type="hidden" name="post[thing_attributes][#{current_index}][_destroy]" id="post_things_attributes_#{current_index}__destroy" value="#current_index" />
  <a class="remove_fields" href="#">x</a>
  </div>
 """

  $(".edit_post input[type='submit']").before(html)
  current_index += 1

 $ ->
  $('#editurl').on('click', editUrl)

Answer 1

要检查的一些事项：

让Rails处理您的路由

在new.html.erb和edit.html.erb中，从url中移除form_for密钥，让Rails找出正确的路线：

<%= form_for @post, html: { multipart: true } do |f| %>    
  <%= f.fields_for :thing do |ff| %>
  <% end %> 
  <%= f.submit %>
<% end %>

更好的是，将此常用代码放入部分_form.html.erb：

# app/views/posts/_form.html.erb
<%= form_for @post, html: { multipart: true } do |f| %>    
  <%= f.fields_for :thing do |ff| %>
  <% end %> 
  <%= f.submit %>
<% end %>

# app/views/posts/new.html.erb | app/views/posts/edit.html.erb
<button id="addtext">Text</button
<button id="addurl">URL</button

<%= render 'form' %>

检查日志

您根本看不到任何内容的事实表明存在错误。日志中还有其他内容吗？

$ tail -f log/development.log

另外请务必检查是否有任何javascript错误（例如在Chrome中，打开检查器工具并查找红叉。如果有，请单击它以打开控制台并列出所有错误。

检查缩进

我注意到的东西（但可能只是粘贴到SO编辑器中）是第1行（current_index = 0）的缩进在添加字段（编辑模板）上都有和添加字段（新模板）文件。 CoffeeScript使用严格的缩进规则：

#    current_index = 0 # <- Your code has extra indentation here
current_index = 0

editText = ->
  html = """
  <div>
   # ...

使用Cocoon

否则，正如上面的评论所述，绝对使用cocoon gem来节省很多样板JS / CS。我还要将simple_form添加到超级有用的工具列表中。

Answer 2

更改

f.fields_for :thing

为：

f.fields_for :things

因为它是一个has_many协会。

编辑：我还看到您的表单没有任何字段呈现在服务器端。但是，需要添加这些字段，以便rails显示您创建的关联：

<%= f.fields_for :things do |ff| %>
  <%= ff.text_field :url %>
  <%= ff.text_area :text %>
<% end %>

正如其他人的建议：使用现有的解决方案通过JS添加关联。这很棘手。试试我的nested_form_fields gem：https://github.com/ncri/nested_form_fields

我不知道茧，但它似乎也是一个很好的解决方案。

Rails - 嵌套表单不会显示在编辑模板中

2 个答案:

让Rails处理您的路由

检查日志

检查缩进

使用Cocoon