Symfony/Jquery Sammlung von Objekten

Question

Ich habe eine Web-App in Symfony. Wenn ich eine Sammlung von Objekten habe (Ein Benutzer hat viele Adressen), muss ich die JavaScript/jQuery-Methode implementieren, damit der Benutzer die Anzahl der Adressen hinzufügen kann, die er hat (https://symfony.com/doc/current/form/form_collections.html).

Das Problem ist, dass ich jedes Etikett und alle Eingänge-Tags mit einem bestimmten div wie <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div> aber nach mehreren Versuchen kann ich nicht tun, um wickeln möge. Kannst du mir helfen ?

Mein Code:

var collectionHolder; 

// Set up an "add address" link 

var addAddressLink = $('<a href="#" class="add_address_link">Add address</a>'); 
var newLinkP = $('<p class="centered"></p>').append(addAddressLink); 

function addAddressForm(collectionHolder, newLinkP){ 

    // Get the data prototype 
    var prototype = collectionHolder.data('prototype'); 

    // get the new index 
    var index = collectionHolder.data('index'); 

    // Replace '__name__' in the prototype's HTML 
    //instead be a number based on how many items we have 
    var newForm = prototype.replace(/__name__/g, index); 

    // Increase the index with one for the new item 
    collectionHolder.data('index', index+1); 

    //Display the form in the page nan li, before the "add address" link 
    var newFormP = $('<div class="one-address"></div>').append(newForm); 
    newLinkP.before(newFormP) 
} 

jQuery(document).ready(function(){ 
    // Get the div that holds the collection of addresses 
    collectionHolder = $('div#addressList'); 

    // add the "add address" anchor 
    collectionHolder.append(newLinkP); 

    // Count the current form inputs 
    // use that as the new index when inserting a new item 
    collectionHolder.data('index', collectionHolder.find(':input').length); 
    addAddressLink.on('click', function(e) 
    { 
     // Prevent the link from creating a "#" on the URL 
     e.preventDefault(); 
     // add a new address form 
     addAddressForm(collectionHolder, newLinkP); 
    }) 
}); 

I:

<div id="AddChildStep1_child_addresses___name__"> 
    <div class="form-group"> 
     <label class="control-label required" for="AddChildStep1_child_addresses___name___street1">Street1</label> 
     <input type="text" id="AddChildStep1_child_addresses___name___street1" name="AddChildStep1[child][addresses][__name__][street1]" required="required" maxlength="100" pattern=".{5,}" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___street2">Street2</label> 
     <input type="text" id="AddChildStep1_child_addresses___name___street2" name="AddChildStep1[child][addresses][__name__][street2]" maxlength="100" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___number">Number</label> 
     <input type="number" id="AddChildStep1_child_addresses___name___number" name="AddChildStep1[child][addresses][__name__][number]" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___box">Box</label> 
     <input type="number" id="AddChildStep1_child_addresses___name___box" name="AddChildStep1[child][addresses][__name__][box]" class="form-control" /> 
    </div> 
    <div class="form-group"> 
     <label class="control-label" for="AddChildStep1_child_addresses___name___locality">Locality</label> 
     <select id="AddChildStep1_child_addresses___name___locality" name="AddChildStep1[child][addresses][__name__][locality]" class="form-control"> 
      <option value=""></option> 
      <option value="1">1080 - Molenbeek-Saint-Jean - BELGIUM</option> 
      <option value="2">1060 - Saint-Gilles - BELGIUM</option> 
      <option value="3">1050 - Ixelles - BELGIUM</option> 
     </select> 
    </div> 
    <div class="form-group"> 
     <label class="control-label required" for="AddChildStep1_child_addresses___name___addressType">Address type</label> 
     <select id="AddChildStep1_child_addresses___name___addressType" name="AddChildStep1[child][addresses][__name__][addressType]" class="form-control"> 
      <option value="HOME">Home</option> 
      <option value="WORK">Work</option> 
      <option value="HOLIDAYS">Holidays</option> 
      <option value="OTHER">Other</option> 
     </select> 
    </div> 
</div> 

Und dann Symfony Dokumentation schlägt dieser Code eine Adresse hinzuzufügen:

<div class="row"> 
    <div id="addressList" data-prototype="{{ form_widget(parent_form.addresses.vars.prototype)|e }}"> 

    </div> 
</div> 

Die {{ form_widget(parent_form.addresses.vars.prototype)|e }} in data-prototype="..." diese HTML erzeugt würde gerne wickle jedes Label-Element und jedes Eingabe-Element (das ist in einem div.one-address) mit <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12></div>.

Answer 1

Sie können Ihr Formular-Rendering jederzeit anpassen. Hier müssen Sie es für einen bestimmten Zweig anpassen. Diese document ist Ihre Referenz. Sie können form_label und form_widget Blöcke zum Überschreiben nach Ihren Bedürfnissen wählen.

{% form_theme form _self %} 

{% block form_label %} 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12> 
     {{- parent() -}} 
    </div> 
{% endblock %} 

{% block form_widget %} 
    <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12> 
     {{- parent() -}} 
    </div> 
{% endblock %} 

In obigem Code form ist die Form, in dem variablen Zweig.

Wenn Sie möchten, dass nur Ihre Sammlungsfelder eine andere Struktur haben, speichern Sie sie in einem separaten Zweig und fügen Sie sie in den Hauptzweig ein. Passen Sie dann nur den enthaltenen Zweig an.

PS: Code nicht getestet.

Hoffe, das hilft!