Javascript 在Symfony2中嵌入多级表单集合
我有以下情况：CVCFormType是BenefiItemsFormType的集合。每个BenefitItemFormType都有一个字段，该字段是BenefitGroupFormType的集合 我希望能够动态添加和删除元素 我按照指示做了。当然，在我们讨论嵌套集合时，必须对它们进行调整 在“固定”方面，一切正常。在动态方面（添加和删除元素），到目前为止，我只实现了内部（添加利益集团），并且只用于添加字段 这是我得到的（这是不对的）。我在顶部福利项目上有一个双链接（我应该只有一个），再加上两组链接（第一个福利） 第二个的项和）不是独立的（我单击上面的第二个项，它会在下面的项中添加一个字段）。我想我必须动态更改ul类名 有什么帮助吗 以下是一个屏幕截图： 代码如下：Javascript 在Symfony2中嵌入多级表单集合,javascript,jquery,symfony,symfony-forms,Javascript,Jquery,Symfony,Symfony Forms,我有以下情况：CVCFormType是BenefiItemsFormType的集合。每个BenefitItemFormType都有一个字段，该字段是BenefitGroupFormType的集合 我希望能够动态添加和删除元素 我按照指示做了。当然，在我们讨论嵌套集合时，必须对它们进行调整 在“固定”方面，一切正常。在动态方面（添加和删除元素），到目前为止，我只实现了内部（添加利益集团），并且只用于添加字段 这是我得到的（这是不对的）。我在顶部福利项目上有一个双链接（我应该只有一个），再加上两组链
{% extends "internal.html.twig" %}
{% block content %}
{{ form_start(form) }}
<br><b>CVC</b>
{% for benefititem in form.benefititems %}
<br><b>Benefit Item</b>
{{ form_row(benefititem.comment) }}
<br><b>Benefit Groups</b>
{# <ul class="benefitgroups"> #}
<ul class="benefitgroups" data-prototype="{{ form_widget(benefititem.benefitgroups.vars.prototype)|e }}">
{% for benefitgroup in benefititem.benefitgroups %}
<li>{{ form_row(benefitgroup.name) }}</li>
{% endfor %}
</ul>
{% endfor %}
{{ form_end(form) }}
{% block javascripts %}
<script>
var $collectionHolder;
// setup an "add a benefitgroup" link
var $addBenefitGroupLink = $('<a href="#" class="add_benefitgroup_link">Add a Group</a>');
var $newLinkLi = $('<li></li>').append($addBenefitGroupLink);
jQuery(document).ready(function() {
// Get the ul that holds the collection of benefit groups
$collectionHolder = $('ul.benefitgroups');
// add the "add a benefitgroup" anchor and li to the benefitgroups ul
$collectionHolder.append($newLinkLi);
// count the current form inputs we have (e.g. 2), use that as the new
// index when inserting a new item (e.g. 2)
$collectionHolder.data('index', $collectionHolder.find(':input').length);
$addBenefitGroupLink.on('click', function(e) {
// prevent the link from creating a "#" on the URL
e.preventDefault();
// add a new tag form (see next code block)
addBenefitGroupForm($collectionHolder, $newLinkLi);
});
});
function addBenefitGroupForm($collectionHolder, $newLinkLi) {
// Get the data-prototype explained earlier
var prototype = $collectionHolder.data('prototype');
// get the new index
var index = $collectionHolder.data('index');
// Replace '__name__' in the prototype's HTML to
// 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 next item
$collectionHolder.data('index', index + 1);
// Display the form in the page in an li, before the "Add a BenefitGroup" link li
var $newFormLi = $('<li></li>').append(newForm);
$newLinkLi.before($newFormLi);
}
</script>
{% endblock %}
{% endblock content %}
{%extends“internal.html.twig”%}
{%block content%}
{{form_start（form）}}
CVC
{benefititems%的形式为benefititems%}
福利项目
{{form_row（benefititem.comment）}
利益集团
{#}
{benefititem.benefitgroups%中的benefitgroup的%
- {{form_row（benefitgroup.name）}
{%endfor%}
{%endfor%}
{{form_end（form）}}
{%block javascripts%}
var$collectionHolder；
//设置“添加福利团体”链接
变量$addBenefitGroupLink=$（''）；
变量$newLinkLi=$（'）.append（$addBenefitGroupLink）；
jQuery（文档）.ready（函数（）{
//获取持有福利团体集合的ul
$collectionHolder=$（'ul.benefitgroups'）；
//将“添加受益团体”主播和li添加到受益团体ul
$collectionHolder.append（$newLinkLi）；
//计算我们当前的表单输入（例如2），将其用作新的表单输入
//插入新项目时的索引（例如2）
$collectionHolder.data（'index'，$collectionHolder.find（':input'）.length）；
$addBenefitGroupLink.on（'click'，函数（e）{
//阻止链接在URL上创建“#”
e、 预防默认值（）；
//添加新的标记表单（请参见下一个代码块）
addBenefitGroupForm（$collectionHolder，$newLinkLi）；
});
});
函数addBenefitGroupForm（$collectionHolder，$newLinkLi）{
//获取前面解释的数据原型
var prototype=$collectionHolder.data（'prototype'）；
//获取新索引
var索引=$collectionHolder.data（'index'）；
//将原型HTML中的“\uuuu name\uuuuuu”替换为
//取而代之的是一个基于我们拥有多少物品的数字
var newForm=prototype.replace（/\uuuuu name\uuuuu/g，索引）；
//为下一项增加索引1
$collectionHolder.data（'index'，index+1）；
//在“添加福利团体”链接li之前的页面中显示表格
变量$newFormLi=$（''）。追加（newForm）；
$newLinkLi.before（$newFormLi）；
}
{%endblock%}
{%endblock内容%}
<html>
<head>
<meta charset="UTF-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<title>Welcome!</title>
<link rel="icon" type="image/x-icon" href="/favicon.ico" />
</head>
<body>
<h1>Here you are inside</h1>
<form name="CVC" method="post" action="">
<br><b>CVC</b>
<br><b>Benefit Item</b>
<div> <label for="CVC_benefititems_0_comment" class="required">Comment</label> <input type="text" id="CVC_benefititems_0_comment" name="CVC[benefititems][0][comment]" required="required" maxlength="400" value="b1" /></div>
<br><b>Benefit Groups</b>
<ul class="benefitgroups" data-prototype="<div id="CVC_benefititems_0_benefitgroups___name__"><div> <label for="CVC_benefititems_0_benefitgroups___name___name" class="required">Name</label> <input type="text" id="CVC_benefititems_0_benefitgroups___name___name" name="CVC[benefititems][0][benefitgroups][__name__][name]" required="required" maxlength="100" /></div></div>">
<li><div> <label for="CVC_benefititems_0_benefitgroups_0_name" class="required">Name</label> <input type="text" id="CVC_benefititems_0_benefitgroups_0_name" name="CVC[benefititems][0][benefitgroups][0][name]" required="required" maxlength="100" value="c1b1" /></div></li>
<li><div> <label for="CVC_benefititems_0_benefitgroups_1_name" class="required">Name</label> <input type="text" id="CVC_benefititems_0_benefitgroups_1_name" name="CVC[benefititems][0][benefitgroups][3][name]" required="required" maxlength="100" value="c2b1" /></div></li>
</ul>
<br><b>Benefit Item</b>
<div> <label for="CVC_benefititems_1_comment" class="required">Comment</label> <input type="text" id="CVC_benefititems_1_comment" name="CVC[benefititems][4][comment]" required="required" maxlength="400" value="b2" /></div>
<br><b>Benefit Groups</b>
<ul class="benefitgroups" data-prototype="<div id="CVC_benefititems_1_benefitgroups___name__"><div> <label for="CVC_benefititems_1_benefitgroups___name___name" class="required">Name</label> <input type="text" id="CVC_benefititems_1_benefitgroups___name___name" name="CVC[benefititems][5][benefitgroups][__name__][name]" required="required" maxlength="100" /></div></div>">
<li><div> <label for="CVC_benefititems_1_benefitgroups_0_name" class="required">Name</label> <input type="text" id="CVC_benefititems_1_benefitgroups_0_name" name="CVC[benefititems][6][benefitgroups][0][name]" required="required" maxlength="100" value="c2b2" /></div></li>
</ul>
<div><button type="submit" id="CVC_submit" name="CVC[submit]">Do Something</button></div><input type="hidden" id="CVC__token" name="CVC[_token]" value="MEUAU3VawkCDJ5jTHo5hSTGrgrWS6XUm-UXeEI9onT8" /></form>
欢迎
你在里面
CVC
福利项目
评论
利益集团
- 名字
- 名字
福利项目
评论
利益集团
- 名字
做点什么
正如您所说，您的问题在于动态方面，即客户端 我要把我的照片贴在你想做的事情上 但是在此之前，一个专业提示：永远不要在属性上打印html，使用另一种技术，比如我正在使用的模板（替换你的
原型attr）。还有很多技术可以做到这一点，我只会解释我的
var $outerTemplate;
var $innerTemplate;
var $outerContainer;
jQuery(document).ready(function($) {
$outerTemplate = $('#top-form-template');
$innerTemplate = $('#inner-form-template');
$outerContainer = $("#row-container");
$("#addRow").on('click', function(e){
addOuterForm();
});
$outerContainer.on('click', '.addItem', function (e) {
addInnerForm(e.target.dataset.rowId);
})
$outerContainer.on('click', '.destroy-row', function (e) {
destroyRow(e.target.dataset.rowId);
});
$outerContainer.on('click', '.destroy-item', function (e) {
destroyItem(e.target.dataset.itemId);
});
});
function addOuterForm () {
var compiled = _.template($outerTemplate.html());
var html = compiled({
outerId: _.uniqueId(),
innerId: _.uniqueId()
});
$outerContainer.append(html);
}
function addInnerForm (outerId) {
var compiled = _.template($innerTemplate.html());
var html = compiled({
outerId: outerId,
innerId: _.uniqueId()
});
$outerContainer.find('#row-'+outerId).find('.benefitgroups').append(html);
}
function destroyRow(id){
$("#row-"+id).remove();
}
function destroyItem(id){
$("#item-"+id).remove();
}
我所做的是创建两个模板，一个用于外部表单（带有福利项目和组的表单），另一个用于内部表单（额外福利项目）。然后使用一些按钮附加和删除它们。我鼓励您查看客户端的模板引擎（我注意到你知道如何使用小枝模板引擎，也许你会很容易抓到）
我使用lodash模板引擎，因为它非常简单，lodash工具非常强大和有用。要嵌入多个表单集合，我通常使用self widget来控制模板。例如：
{{form.name}}
<ul id="benefit-items" data-prototype="{{_self.widget_prototype(form.benefitItems.vars.prototype}|e}}">
{% for benefitItem in form.benefitItems %}
{{_self.widget_prototype(benefitItem)}}
{% endfor %}
<li id="add-benefit-item" onclick="addBenefitItem(this);">add benefit</li>
</ul>
{% macro widget_prototype(form) %}
<li class="benefitItem">
{{form.title}}
<ul class="benefit-group" data-prototype="{{form_widget(form.benefitGroups.vars.prototype)|e}}">
</ul>
</li>
{% endmacro %}
{{form.name}
{%macro-widget_-prototype（form）%}
{{form.title}