Symfony/Jquery对象集合 [英] Symfony/Jquery Collection of objects
问题描述
我在Symfony中有一个Web应用程序.当我有一组对象(一个用户有很多地址)时，我需要实现JavaScript/jQuery方法，以使用户添加他拥有的地址数(
I have a web app in Symfony. When I have a collection of objects (A user has many addresses) I need to implement JavaScript/jQuery method to let the user add the number of addresses that he has (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>，但是经过几次尝试后，我无法做到这一点.你能帮助我吗 ?
The problem is that I want to wrap every label and every input tags with a particular div like <div class="col-lg-4 col-md-4 col-sm-4 col-xs-12"></div> but after several tries I can't do that. Can you help me ?
我的代码:
<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:
The {{ form_widget(parent_form.addresses.vars.prototype)|e }} in data-prototype="..." generates this 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文档提出此代码以添加地址:
And then Symfony documentation propose this code to add an address :
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中).
I would like to wrap every label element and every input element (that is in a div.one-address) with <div class="col-lg-4 col-md-4 col-sm-6 col-xs-12></div>.
推荐答案
您始终可以在任何级别上自定义表单呈现.在这里，您需要针对特定的树枝对其进行自定义.这份文档供您参考.您可以根据需要选择form_label和form_widget块进行覆盖.
You can always customise your form rendering, at any level. Here, you need to customise it for a particular twig. This document is your reference. You can choose form_label and form_widget blocks to overwrite as per your need.
{% 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变量.
In above code form is the Form variable in the twig.
如果仅希望集合字段具有不同的结构，请将它们保存在单独的树枝中，并包括在主树枝中.然后，仅自定义随附的树枝.
If you want only your collection fields to have a different structure, save them in a separate twig and include in main twig. Then, customise the included twig only.
PS:代码未经测试.
PS : Code not tested.
希望这会有所帮助！
这篇关于Symfony/Jquery对象集合的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
