Symfony/Jquery 对象集合

Question

我在 Symfony 中有一个网络应用程序。当我有一个对象集合（一个用户有很多地址）时，我需要实现 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 来包装每个标签和每个输入标签，但经过几次尝试我无法做到。你能帮助我吗 ？

我的代码：

<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 }} 生成这个 html：

<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是twig中的Form变量。

如果您只希望您的集合字段具有不同的结构，请将它们保存在单独的树枝中并包含在主树枝中。然后，仅自定义包含的树枝。

PS : 代码未测试。

希望这会有所帮助！