ruby-on-rails - 预构建嵌套模型实例时，Railsnested_form link_to_add 不起作用

Question

我正在艰难地将 ryanb 令人敬畏的 nested_form gem 集成到我的 rails 3.1.3 应用程序中。恐怕我的 Javascript 技能太有限，无法知道是我的代码(可能)还是需要更改的 gem。也许这里有人可以提供帮助。

设置:我有一个“:households”类:accepts_nested_attributes_for“:成员(人)”。我正在运行开发服务器。我将 nested_form.js 移动到/app/assets/javascripts 目录。我几乎可以肯定它只被采购一次。

问题:如果在家庭 Controller "new"方法中，我这样做:

@household = Household.new

我在 View 中只看到家庭本地字段(预期)，并且“link_to_remove”和“link_to_add”链接呈现/删除部分成员字段(预期)。但是，如果我这样做:

@household = Household.new
@household.members.build

我在 View 中看到家庭原生字段(预期)，成员原生字段的一个呈现部分(预期)，但“link_to_remove”和“link_to_add”什么都不做(意外)。那时我不能添加另一个 :members 部分，也不能删除已经显示的 :members 部分。

我难住了。以下是看起来相关的精简源文件。我正在从 git 存储库(最后捆绑 2012.04.18)中获取 nested_form 插件...

/app/models/household.rb

class Household < ActiveRecord::Base
  has_many :members, :class_name => "Person"
  accepts_nested_attributes_for :members
  attr_accessible :id, :name, :member_ids
  attr_accessible :members_attributes
end #class

/app/models/person.rb

class Person < ActiveRecord::Base
  belongs_to :household  
  attr_accessible :id, :name_given, :name_middle, :name_family, :household_id 
end #class

/app/controllers/households_controller.rb

  <snip>
  # GET /households/new
  # GET /households/new.json
  def new
    @household = Household.new
    @household.members.build     # <---- Removing this changes the behavior

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

/app/views/households/new.html.haml

.headbg
  .pad
    %h2 Enter a New Household
= render 'form'

/app/views/households/_form.html.haml

= nested_form_for @household, :html => { :class => "form-horizontal"} do |f|

  %fieldset 
    %legend Household

    .control-group
      = f.label( :name, { :class => 'control-label'} )
      .controls
        = f.text_field( :name, { :class => 'span5', :placeholder => '[household name]'} )

  %fieldset 
    %legend Household Members
    = f.fields_for :members, :html => { :class => "form-inline"} do |nested_f|
      = render :partial => 'people/nested_person_form', :locals => { :f => nested_f }
      = yield :nested_person_form
    %p
      = f.link_to_add "New Household Member", :members 

  .form-actions
    = button_tag( :class => "btn btn-primary", :disable_with => "Saving..."  ) do
      %i.icon-ok.icon-white
      Save
    = link_to households_path do
      .btn.btn-info
        %i.icon-arrow-left.icon-white
        Back to Households

/app/views/people/_nested_person_form.html.haml

- content_for :nested_person_form do

  .nested-fields
    .row
      .span8 
        .control-group
          = f.label( "Name", { :class => 'control-label'} )
          .controls
            = f.text_field( :name_given, { :class => 'span2', :placeholder => '[first]'} )
            = f.text_field( :name_middle, { :class => 'span2', :placeholder => '[middle]'} )
            = f.text_field( :name_family, { :class => 'span2', :placeholder => '[last]'} ) 
      .span1
        = f.link_to_remove "Remove"

/app/assets/javascripts/nested_form/nested_form.js

jQuery(function($) {
  window.NestedFormEvents = function() {
    this.addFields = $.proxy(this.addFields, this);
    this.removeFields = $.proxy(this.removeFields, this);
  };

  NestedFormEvents.prototype = {
    addFields: function(e) {
      // Setup
      var link    = e.currentTarget;
      var assoc   = $(link).attr('data-association');            // Name of child
      var content = $('#' + assoc + '_fields_blueprint').html(); // Fields template

      // Make the context correct by replacing new_<parents> with the generated ID
      // of each of the parent objects
      var context = ($(link).closest('.fields').find('input:first').attr('name') || '').replace(new RegExp('\[[a-z]+\]$'), '');

      // context will be something like this for a brand new form:
      // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]
      // or for an edit form:
      // project[tasks_attributes][0][assignments_attributes][1]
      if (context) {
        var parentNames = context.match(/[a-z_]+_attributes/g) || [];
        var parentIds   = context.match(/(new_)?[0-9]+/g) || [];

        for(var i = 0; i < parentNames.length; i++) {
          if(parentIds[i]) {
            content = content.replace(
              new RegExp('(_' + parentNames[i] + ')_.+?_', 'g'),
              '$1_' + parentIds[i] + '_');

            content = content.replace(
              new RegExp('(\\[' + parentNames[i] + '\\])\\[.+?\\]', 'g'),
              '$1[' + parentIds[i] + ']');
          }
        }
      }

      // Make a unique ID for the new child
      var regexp  = new RegExp('new_' + assoc, 'g');
      var new_id  = new Date().getTime();
      content     = content.replace(regexp, "new_" + new_id);

      var field = this.insertFields(content, assoc, link);
      $(link).closest("form")
        .trigger({ type: 'nested:fieldAdded', field: field })
        .trigger({ type: 'nested:fieldAdded:' + assoc, field: field });
      return false;
    },
    insertFields: function(content, assoc, link) {
      return $(content).insertBefore(link);
    },
    removeFields: function(e) {
      var link = e.currentTarget;
      var hiddenField = $(link).prev('input[type=hidden]');
      hiddenField.val('1');
      // if (hiddenField) {
      //   $(link).v
      //   hiddenField.value = '1';
      // }
      var field = $(link).closest('.fields');
      field.hide();
      $(link).closest("form").trigger({ type: 'nested:fieldRemoved', field: field });
      return false;
    }
  };

  window.nestedFormEvents = new NestedFormEvents();
  $('form a.add_nested_fields').live('click', nestedFormEvents.addFields);
  $('form a.remove_nested_fields').live('click', nestedFormEvents.removeFields);
});

Answer 1

确保您的脑海中链接了最新的 jQuery.js 文件之一。一旦加载，不要使用 nested_form.js从 gem 安装的文件。而是使用 jquery_nested_form.js .
只要您在 jquery_nested_form 之前有 jquery 链接，这是一个可以正常工作的解决方案。文件:

<%= javascript_include_tag :defaults, 'jquery_nested_form' %>

这是 jquery_nested_form.js 的代码文件:

    jQuery(function($) {
  window.NestedFormEvents = function() {
    this.addFields = $.proxy(this.addFields, this);
    this.removeFields = $.proxy(this.removeFields, this);
  };

  NestedFormEvents.prototype = {
    addFields: function(e) {
      // Setup
      var link    = e.currentTarget;
      var assoc   = $(link).attr('data-association');            // Name of child
      var content = $('#' + assoc + '_fields_blueprint').html(); // Fields template

      // Make the context correct by replacing new_<parents> with the generated ID
      // of each of the parent objects
      var context = ($(link).closest('.fields').closestChild('input, textarea').eq(0).attr('name') || '').replace(new RegExp('\[[a-z]+\]$'), '');

      // context will be something like this for a brand new form:
      // project[tasks_attributes][new_1255929127459][assignments_attributes][new_1255929128105]
      // or for an edit form:
      // project[tasks_attributes][0][assignments_attributes][1]
      if (context) {
        var parentNames = context.match(/[a-z_]+_attributes/g) || [];
        var parentIds   = context.match(/(new_)?[0-9]+/g) || [];

        for(var i = 0; i < parentNames.length; i++) {
          if(parentIds[i]) {
            content = content.replace(
              new RegExp('(_' + parentNames[i] + ')_.+?_', 'g'),
              '$1_' + parentIds[i] + '_');

            content = content.replace(
              new RegExp('(\\[' + parentNames[i] + '\\])\\[.+?\\]', 'g'),
              '$1[' + parentIds[i] + ']');
          }
        }
      }

      // Make a unique ID for the new child
      var regexp  = new RegExp('new_' + assoc, 'g');
      var new_id  = new Date().getTime();
      content     = content.replace(regexp, "new_" + new_id);

      var field = this.insertFields(content, assoc, link);
      // bubble up event upto document (through form)
      field
        .trigger({ type: 'nested:fieldAdded', field: field })
        .trigger({ type: 'nested:fieldAdded:' + assoc, field: field });
      return false;
    },
    insertFields: function(content, assoc, link) {
      return $(content).insertBefore(link);
    },
    removeFields: function(e) {
      var $link = $(e.currentTarget),
          assoc = $link.data('association'); // Name of child to be removed
      
      var hiddenField = $link.prev('input[type=hidden]');
      hiddenField.val('1');
      
      var field = $link.closest('.fields');
      field.hide();
      
      field
        .trigger({ type: 'nested:fieldRemoved', field: field })
        .trigger({ type: 'nested:fieldRemoved:' + assoc, field: field });
      return false;
    }
  };

  window.nestedFormEvents = new NestedFormEvents();
  $('form a.add_nested_fields').live('click', nestedFormEvents.addFields);
  $('form a.remove_nested_fields').live('click', nestedFormEvents.removeFields);
});
// http://plugins.jquery.com/project/closestChild
/*
 * Copyright 2011, Tobias Lindig
 *
 * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php)
 * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses.
 *
 */
(function($) {
        $.fn.closestChild = function(selector) {
                // breadth first search for the first matched node
                if (selector && selector != '') {
                        var queue = [];
                        queue.push(this);
                        while(queue.length > 0) {
                                var node = queue.shift();
                                var children = node.children();
                                for(var i = 0; i < children.length; ++i) {
                                        var child = $(children[i]);
                                        if (child.is(selector)) {
                                                return child; //well, we found one
                                        }
                                        queue.push(child);
                                }
                        }
                }
                return $();//nothing found
        };
})(jQuery);