Question

我关注Railscast #196 revised，一切都基本上没问题，但我无法在嵌套表单中添加新字段。 “删除字段”功能运行良好，但点击“link_to_add_fields”后，浏览器会跳转到页面顶部，并且不会显示新字段。

此围栏播放已经有很多问题，例如here或here，我试图阅读所有这些问题，但其中大部分都是指2010年的原始演员。我现在被困了几个小时，我无法弄清楚，问题出在哪里。对不起，如果它是一个新手的错误，我对rails很新。任何帮助都会非常感激！

我遵循＃196修订版，使用Rails 3.2.13，Ruby 1.9.3

模型/ post.rb

class Post < ActiveRecord::Base
    attr_accessible :content, :title, :image, :postfiles_attributes
    has_many :postfiles, :dependent => :destroy 
    accepts_nested_attributes_for :postfiles, allow_destroy: true
end

模型/ postfile.rb

class Postfile < ActiveRecord::Base
  attr_accessible :dropbox, :gdrive, :post_id
  belongs_to :post
end

视图/帖/ _form.html.erb

<%= simple_form_for @post do |f| %>

  <%= f.fields_for :postfiles do |builder| %>
       <%= render 'postfile_fields', f: builder %>
  <% end %>
  <%= link_to_add_fields "Add File", f, :postfiles %>

<% end %>

视图/帖/ _postfile_fields.html.erb

<fieldset>  
    <%= f.text_field :dropbox %>
    <%= f.hidden_field :_destroy %>
    <%= link_to "remove", '#', class: "remove_fields" %>
</fieldset>

postfiles.js.coffee

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

  $('form').on 'click', '.add_fields', (event) ->
    time = new Date().getTime()
    regexp = new RegExp($(this).data('id'), 'g')
    $(this).before($(this).data('fields').replace(regexp, time))
    event.preventDefault()

application_helper.rb

module ApplicationHelper
  def link_to_add_fields(name, f, association)
    new_object = f.object.send(association).klass.new
    id = new_object.object_id
    fields = f.fields_for(association, new_object, child_index: id) do |builder|
      render(association.to_s.singularize + "_fields", f: builder)
    end
    link_to(name, '#', class: "add_fields", data: {id: id, fields: fields.gsub("\n", "")})
  end
end

预先，非常感谢你的帮助！

更新：我使用的是简单形式。请参阅上面的_form文件。这可能是一个问题吗？

更新II：

我收到一个Javascript错误，不确定这是否可能是此问题的问题： Chrome将其称为“未捕获的SyntaxError：意外的保留字”，Firebug将其称为“SyntaxError：unterminated string literal”。该错误指向此js代码部分：

loadData: function(data){

   this.$editor.addClass('st-block__editor');

   this.$editor.html("
   <div class='st-block__inner'>
      <div class='media'>
        <a class='pull-left' >
          <img class='media-object link-pic' src='" + data.thumbnail_url + "'>
        </a>
        <div class='media-body'>
          <div class='link-source'>" + data.provider_name + "</div>
          <div class='link-title'> <a href='#'>" + data.title + "</a></div>    
          <div class='link-description'>" + data.description + "</div>  
        </div>
      </div>
    </div>
  ");
},

更新3：

帖子控制器可以成为问题的一部分吗？

这是我的posts_controller.rb

def new
    @post = current_user.posts.new
    @post.postfiles.build

    respond_to do |format|
      format.html # new.html.erb
      format.json { render json: @post }
    end
  end

再次感谢您的帮助！

Answer 1

我偶然发现了Railscast #403 on Dynamic Forms，其中嵌套表单也是教程的一部分。 Ryan在本集中使用了javascript部分的编辑代码，使代码与Turbolinks兼容。我在postfiles.js.coffee中尝试了下面的版本，它有效！添加字段链接最终生成新字段。

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

$(document).on 'click', 'form .add_fields', (event) ->
  time = new Date().getTime()
  regexp = new RegExp($(this).data('id'), 'g')
  $(this).before($(this).data('fields').replace(regexp, time))
  event.preventDefault()

Answer 2

你应该注意单数和复数形式。模型的文件名应为 postfile.rb ，而不是 postfiles.rb

同样适用于 _postfiles_fields.html.erb ，它应该是 _postfile_fields.html.erb

所以，基本上函数找不到模板，因为它是复数形式而不是单数形式，但它以单数形式调用。改变这一点，你应该没事。其余的代码看起来不错。

嵌套模型表单 - Railscast＃196修订 - 通过jQuery添加字段不起作用

2 个答案: