javascript - 如何在 Rails 中预填充动态添加的表单输入

Question

我有一个edit.html.erb表格 @profile实例。通常，当我加载表单时，表单内的输入会预先填充实例的相应属性。

例如<%= f.text_field :name %>将从 @profile.name 中预先填充其值.

我想使用 jQuery 在运行时添加附加字段，允许用户通过附加动态添加的输入来输入附加数据。

即@profile.subjects是包含主题及其描述的哈希(例如，它可能是 {"math" => "I teach calculus", "science" => "I have a physics degree"} )

我从 @profile.subjects 检索主题列表，然后插入textarea使用 append() 将元素添加到每个主题的表单中在 jQuery 中。

所以如果 @profile.subjects包含“数学”和“科学”，我会在 jQuery 中执行以下操作:

var subject = *string containing subject*;
parent.append("<textarea id='profile_" + subject + "_desc' name='profile[" + subject + "_desc]'></textarea");

这将模仿创建字段 <%= f.text_area :math_desc %>和<%= f.text_area :science_desc %>据我所知。

但是，当我传入属性 math_desc 时和science_desc到实例变量@profile在我的 Controller 中，与静态表单输入不同，输入不会预先填充其值。

我可以访问@profile.math_desc和@profile.science_desc在 View 中，但我希望输入在 View 加载时具有这些值。

我不知道如何将 ruby​​ 变量添加到 append()以变​​量作为属性名称的参数。 例如append("<textarea><%= @profile.send('math_desc') %></textarea>")有效，但是 append("<textarea><%= @profile.send('" + subject + "_desc') %></textarea>")没有。

编辑1:

以下是我为实例分配附加属性的方法:

# NOTE: @profile.subjects contains a string representation of {"Math" => "I teach calculus", "Science" => "I have a physics degree", ...}

  def edit
     @tutor = current_tutor
     @profile = @tutor.profile
     # Call method to parse subjects JSON
     subject_parsing(@profile)
  end 

  private 
  # Decode JSON subject field into a hash
  def subject_parsing(profile)
    unless profile.subjects.blank?
      # Decode subjects into a hash
      parsed_subjects = ActiveSupport::JSON.decode(profile.subjects)
      # Extract subject names from hash into a string separated by commas
      profile.subject_names = parsed_subjects.keys.join(', ')

      parsed_subjects.each do |subj, desc| 
        subj = subj.downcase
        profile.class_eval do
          attr_accessor "#{subj}_desc"
        end
        profile.send("#{subj}_desc=", desc)
      end
    end
  end

Answer 1

所以我的解决方法是使用 gon gem 将 Rails 哈希发送到 Javascript，然后根据 subject_names 数组调用主题描述。

将此添加到 Controller (请参阅编辑 1 代码)

  # Decode JSON subject field into a hash
  def subject_parsing(tutor_profile)
    unless tutor_profile.subjects.blank?
      # Decode subjects into a hash TODO: change this because it is very slow
      gon.subjects = ActiveSupport::JSON.decode(tutor_profile.subjects)
      # Extract subject names from hash into a string separated by commas
      tutor_profile.subject_names = gon.subjects.keys.join(', ')
    end
  end

然后在 Javascript 中得到这样的结果:

var subjectNamesInput = $('#tutor_profile_subject_names');

// Initialize subject description input boxes
$.each(subjectNamesInput.tagsinput('items'), function(i, subject){
    updateSubjectInputs(subject, 'add');
});

function updateSubjectInputs(subject, action){
    var parent = $('#subject-description-inputs');

    var subject = escape(subject);

    var text = "";

    if (gon.subjects[subject] != undefined)
        text = gon.subjects[subject];

    if (action == 'add'){
        parent.append("<textarea id='tutor_profile_" + subject.toLowerCase() + "_description' name='tutor_profile[" + 
            subject.toLowerCase() + "_description]' class='form-control form-text-area' rows='5' placeholder='Add some detail about your experience with " + subject + 
            " (optional)'>" + text + "</textarea>");
    }
    else if (action == 'remove'){
        $('#tutor_profile_' + subject.toLowerCase() + '_description').remove();
    }
}

这是我的观点:

<%= f.text_field :subject_names, class: 'form-control tagsinput typeahead', placeholder: 'Subjects you teach' %>

<div id="subject-description-inputs">
</div>