javascript - Symfony/Jquery 对象集合

Question

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

问题是我想用特定的 div 来包装每个标签和每个输入标签，例如 <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>

{{ form_widget(parent_form.addresses.vars.prototype)|e }}在data-prototype="..."生成此 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.one-address 包装每个标签元素和每个输入元素(即在 <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12></div> 中) .

Answer 1

您始终可以在任何级别自定义表单呈现。在这里，您需要为特定的 Twig 定制它。这个document是你的引用。您可以根据需要选择 form_label 和 form_widget block 进行覆盖。

{% 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变量。

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

PS:代码未经测试。

希望这有帮助!