Как динамически добавлять и удалять вложенные модельные поля, используя Haml и Formtastic

Question

Мы все видели блестящие сложные формы railscast , где Райан Бейтс объясняет, как динамически добавлять или удалять вложенные объекты в форме родительского объекта с использованием Javascript.

У кого-нибудь есть идеи о том, как эти методы нужно модифицировать для работы с Haml Formtastic?

Чтобы добавить некоторый контекст, вот упрощенная версия проблемы, с которой я сейчас сталкиваюсь:

# Форма учителя (которая имеет вложенные предметные формы) [из моего приложения]

- semantic_form_for(@teacher) do |form|
  - form.inputs do
    = form.input :first_name
    = form.input :surname
    = form.input :city
    = render 'subject_fields', :form => form 
    = link_to_add_fields "Add Subject", form, :subjects   

# Индивидуальная форма предмета частичная [из моей заявки]

- form.fields_for :subjects do |ff| 
  #subject_field
    = ff.input :name
    = ff.input :exam
    = ff.input :level
    = ff.hidden_field :_destroy
    = link_to_remove_fields "Remove Subject", ff 

# Application Helper (прямо из Railscasts)

  def link_to_remove_fields(name, f)
    f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
  end

  def link_to_add_fields(name, f, association)
    new_object = f.object.class.reflect_on_association(association).klass.new
    fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
      render(association.to_s.singularize + "_fields", :f => builder)
    end
    link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}  \")"))
  end

# Application.js (прямо из Railscasts)

  function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".fields").hide();
  }

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).up().insert({
    before: content.replace(regexp, new_id)
  });
  }

Проблема с реализацией, похоже, связана с методами javascript - дерево DOM формы Formtastic значительно отличается от обычной формы рельсов.

Я видел, как этот вопрос задавался онлайн несколько раз, но еще не нашел ответа - теперь вы знаете, что помощь оценят не только я!

Jack

Answer 1

Вы на правильном пути:

... дерево DOM формы Formtastic сильно отличается от обычных рельсов форма.

Чтобы адаптировать пример Райана для formtastic, полезно напомнить, что помощник semantic_fields_for похож на помощник semantic_form_for, который выводит входные данные в виде списка.

Чтобы все было как можно ближе к коду Railscast, вам необходимо:

• заключить коллекцию вложенных полей в оболочку (я использую div с subjects CSS ID.)
• заключить вложенные поля в оболочку ul / ol (я применил nested-fields класс CSS.)

Вот как должны выглядеть ваши файлы.

Форма учителя (с вложенными полями темы):

- semantic_form_for(@teacher) do |form|
  - form.inputs do
    = form.input :first_name
    = form.input :surname
    = form.input :city

    %h2 Subjects
    #subjects
      - form.semantic_fields_for :subjects do |builder|
        = render :partial => "subject_fields", :locals => { :f => builder }
      .links
        = link_to_add_fields "Add Subject", form, :subjects

Частичные поля темы (для вложенных тем):

%ul.nested-fields
  = f.input :name
  = f.input :exam
  = f.input :level
  = link_to_remove_fields "Remove Subject", f

ApplicationHelper:

def link_to_remove_fields(name, f)
  f.hidden_field(:_destroy) + link_to_function(name, "remove_fields(this)")
end

def link_to_add_fields(name, f, association)
  new_object = f.object.class.reflect_on_association(association).klass.new
  fields = f.fields_for(association, new_object, :child_index => "new_#{association}") do |builder|
    render(association.to_s.singularize + "_fields", :f => builder)
  end
  link_to_function(name, h("add_fields(this, \"#{association}\", \"#{escape_javascript(fields)}\")"))
end

application.js:

function remove_fields(link) {
  $(link).previous("input[type=hidden]").value = "1";
  $(link).up(".nested-fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).up().insert({
    before: content.replace(regexp, new_id)
  });
}

Использование следующих драгоценных камней:

• Formtastic (0.9.10)
• хамл (3.0.2)
• огурчик (1.0.26)
• рельсы (2.3.5)

Answer 2

application.js для jQuery:

function remove_fields(link) {
  $(link).prev("input[type=hidden]").val("1");
  $(link).parent(".nested-fields").hide();
}

function add_fields(link, association, content) {
  var new_id = new Date().getTime();
  var regexp = new RegExp("new_" + association, "g")
  $(link).parent().before(content.replace(regexp, new_id));
}

Answer 3

Я бьюсь головой об этом в течение многих лет, и я только сегодня придумал то, чем я горжусь - элегантный, ненавязчивый, и вы можете сделать это только два или три (очень долго) строки кода.

ParentFoo has_many NestedBars, с соответствующими acceptpts_nested_parameters и всеми этими вкусностями. Вы отображаете набор полей для nested_bar в атрибут data-add-nested в ссылке, используя: child_index, чтобы установить строку, которую вы можете заменить позже. Вы передаете эту строку во второй параметр data-add-nested-replace

parent_foos / _form.html.haml

- semantic_form_for @parent_foo do |f|
  -# render existing records
  - f.semantic_fields_for :nested_bars do |i|
    = render 'nested_bar_fields', :f => i

  # magic!
  - reuse_fields = f.semantic_fields_for :nested_bars, @parent_foo.nested_bars.build, :child_index => 'new_nested_bar_fields' do |n| render('nested_bar_fields', :f => n) end
  = link_to 'Add nested bar', '#', 'data-add-nested' => reuse_fields, 'data-add-nested-replace' => 'new_nested_bar_fields'

частичные вложенные поля ничего особенного

parent_foos / _nested_bar_fields.html.haml

- f.inputs do
  = f.input :name
  = f.input :_delete, :as => :boolean

В вашем jQuery вы связываете щелчок элементов с полем для добавления данных (я использовал здесь live (), чтобы формы, загруженные ajax, работали), чтобы вставить поля в DOM, заменяя строку новый идентификатор. Здесь я делаю простую вещь, вставляя новые поля перед () ссылкой, но вы также можете указать в ссылке атрибут add-nested-replace-target, указывающий, где в DOM вы хотите, чтобы новые поля свернулись.

application.js

$('a[data-add-nested]').live('click', function(){
  var regexp = new RegExp($(this).data('add-nested-replace'), "g")
  $($(this).data('add-nested').replace(regexp, (new Date).getTime())).insertBefore($(this))
})

Вы могли бы поместить это в помощника, конечно; Я представляю это здесь непосредственно в представлении, так что принцип ясен без использования метапрограммирования. Если вас беспокоит конфликт имен, вы можете сгенерировать уникальный идентификатор в этом помощнике и передать его в виде nested-replace.

Придумывание поведения удаления будет оставлено читателю в качестве упражнения.

(показано для Rails 2, потому что это сайт, над которым я работаю сегодня - почти то же самое в Rails 3)

Answer 4

В Rails 3 нет необходимости использовать функцию h () в помощнике. Просто опустите и это должно работать.