So fügen Sie verschachtelte Modellfelder dynamisch hinzu und entfernen sie mithilfe von Haml und Formtastic

Wir haben alle gesehen, die brillante komplexe Formen railscast wo Ryan Bates erklärt, wie dynamisch hinzufügen oder entfernen von verschachtelten Objekten innerhalb des parent-Objekt form mit Javascript.

Hat jemand irgendwelche Ideen, wie man diese Methoden geändert werden müssen, so wie die Arbeit mit Haml Formtastic?

Fügen Sie einige Kontext hier ist eine vereinfachte version von dem problem habe ich derzeit:

# Teacher form (die verschachtelte Thema Formen) [my application]

- 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

# Individuelle Subjekt bilden teilweise [aus meiner Anwendung]

- 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

# - Anwendung Helfer (gerade von 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 (gerade von 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)
  });
  }

Das problem bei der Implementierung scheint zu sein, mit der javascript-Methoden, die DOM-Struktur einer Formtastic form unterscheidet sich stark von einem regulären Schienen bilden.

Ich habe gesehen, diese Frage online ein paar mal, aber noch nicht in eine Antwort noch - nun, Sie wissen, dass Hilfe wird geschätzt, um mehr als nur mich!

Jack

InformationsquelleAutor der Frage Jack Kinsella | 2010-04-20

Du bist auf dem richtigen Weg:

...der DOM-Baum von einem Formtastic form
unterscheidet sich stark von einem regulären Schienen
form.

Anzupassen Ryans Beispiel für formtastic, ist es hilfreich, daran erinnert zu werden, dass die semantic_fields_for Helfer ist ähnlich wie die semantic_form_for Helfer, die Ausgänge den Eingängen in form einer Liste.

Dinge zu halten als in der Nähe des Railscast-code wie möglich, müssen Sie Folgendes tun:

schließen Sie die Sammlung von geschachtelten Feldern in einem wrapper (ich benutze ein div mit der subjects CSS-ID.)
schließen Sie die verschachtelte Felder in einer ul - /ol-wrapper - (ich habe eine nested-fields CSS-Klasse.)

Hier ist, was sollten die Dateien wie.

Teacher form (mit verschachtelten Thema Felder):

- 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

Themenfelder teilweise (für verschachtelte Thema):

%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)
  });
}

Mit folgenden Edelsteinen:

formtastic (0.9.10)
haml (3.0.2)
Gurke (1.0.26)
rails (2.3.5)

InformationsquelleAutor der Antwort Bennett

application.js für 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));
}

InformationsquelleAutor der Antwort Steve

1

In Rails 3, gibt es keine Notwendigkeit für die Verwendung der h () - Funktion in der Hl. Einfach weglassen und es sollte funktionieren.

InformationsquelleAutor der Antwort Nolsto
1

Ich habe gegen mein Kopf gegen diese ein-und ausschalten für Jahre, und ich habe gerade heute kam mit etwas, das ich stolz bin - elegant, unaufdringlich, und Sie können es nur zwei oder drei (wirklich langen) Zeilen code.

ParentFoo has_many NestedBars, mit entsprechenden accepts_nested_parameters und all den leckereien. Machen Sie eine Reihe von Feldern für eine nested_bar in eine Daten-add-nested-Attribut auf den link mit der :child_index um eine Zeichenfolge, die Sie ersetzen können später. Sie übergeben Sie die Zeichenfolge in einer zweiten parameter, Daten-add-nested-ersetzen

parent_foos/_form.html-Code.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'
```
die verschachtelten Felder, teilweise ist nichts besonderes

parent_foos/_nested_bar_fields.html-Code.haml
```
- f.inputs do
  = f.input :name
  = f.input :_delete, :as => :boolean
```
In Ihre jQuery binden Sie die klicken Sie auf Elemente mit einem Daten-add-geschachtelten Feld (ich habe die live() hier so ajax-geladenen Formulare funktionieren wird), um die Felder einfügen, die in den DOM, und ersetzen Sie die Zeichenfolge mit einer neuen ID. Hier mache ich die einfache Sache das einfügen der neuen Felder vor() der link, aber Sie könnten auch ein add-nested-ersetzen-target-Attribut auf dem link sagen, wo in der DOM-Sie wollen die neuen Felder zu wind-up.

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))
})
```
Könnte man dies in einem Helfer, natürlich; ich präsentiere es hier direkt in der Ansicht so, das Prinzip ist klar, ohne zu mucken über in metaprogramming. Wenn Sie sind besorgt über Namen kollidieren, könnten Sie erzeugen eine eindeutige ID, in, Helfer und übergeben Sie es in verschachtelten ersetzen.

immer Lust mit dem löschen Verhalten ist Links als übung für den Leser.

(gezeigt für Schienen 2, weil das der Ort an dem ich arbeite heute fast das gleiche in Rails 3)

InformationsquelleAutor der Antwort

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.