Symfony/Jquery对象集合

Question

我在Symfony中有一个Web应用程序。当我有一个对象集合（一个用户有很多地址）时，我需要实现JavaScript/jQuery方法来让用户添加他拥有的地址数量（https://symfony.com/doc/current/form/form_collections.html）。

问题是，我想包装每个标签和每个输入标签与<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div>特殊格，但经过多次尝试我不能这样做。你可以帮我吗 ？

我的代码：

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

    </div> 
</div> 

在data-prototype="..."的{{ form_widget(parent_form.addresses.vars.prototype)|e }}产生这个网站：

<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> 

然后Symfony的文档提议该代码添加一个地址：

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

我想用<div class="col-lg-4 col-md-4 col-sm-6 col-xs-12></div>包装每个标签元素和每个输入元素（即在div.one-address中）。

Answer 1

您可以随时自定义您的表单呈现，在任何级别。在这里，您需要为特定的树枝定制它。这document是你的参考。您可以根据需要选择form_label和form_widget块进行覆盖。

{% 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 %} 

在上面的代码form是树枝中的Form变量。

如果你只想要你的收藏领域有不同的结构，保存在一个单独的树枝，并包括在主树枝。然后，只能自定义包含的树枝。 PS：Code未经测试。

希望这会有所帮助！