Javascript Symfony 3多级嵌套表单

我一直在学习symfony3教程中的一组表单，我想将这个想法扩展到额外的嵌套级别。我环顾四周，发现Symfony 2有部分答案，但没有全面的答案（Symfony 3也没有）

如果我们以教程

任务

有许多

标记

为例，我将如何对其进行编码，使其扩展到：

任务

有许多

标记

有许多

子标记

到目前为止，我认为我理解表单类：

任务：

标签：

子标签：

class SubTagType extends AbstractType
    {
        public function buildForm(FormBuilderInterface $builder, array $options)
        {
            $builder->add('name');
        }

        public function configureOptions(OptionsResolver $resolver)
        {
            $resolver->setDefaults(array(
                'data_class' => 'AppBundle\Entity\SubTag',
            ));
        }
    }

和基本的细枝类：

{{ form_start(form) }}
    {# render the task's only field: description #}
    {{ form_row(form.description) }}

    <h3>Tags</h3>
    <ul class="tags">
        {# iterate over each existing tag and render its only field: name #}
        {% for tag in form.tags %}
            <li>{{ form_row(tag.name) }}</li>
            {% for sub_tag in tag.sub_tags %}
                <li>{{ form_row(sub_tag.name) }}</li>
            {% endfor %}
        {% endfor %}
    </ul>
{{ form_end(form) }}

{{form_start（form）}
{#呈现任务的唯一字段：description}
{{form_row（form.description）}}
标签

{#迭代每个现有标记并呈现其唯一字段：name#}
{form.tags%中的标记的%s}
{{form_row（tag.name）}
{tag.sub_tags%}
{{form_row（sub_tag.name）}
{%endfor%}
{%endfor%}

{{form_end（form）}}

但在这一点上，我不确定原型和javascript将如何工作。谁能解释一下我下一步该怎么做？这是正确的方法吗

我的第一个想法是，如果我们在做额外的级别，那么将JS推广到任意数量的级别可能是明智的，因为教程使用的JS只能在单个级别上工作

---

我能找到的最接近的工作代码是这个堆栈溢出答案。然而，它似乎并没有像描述的那样工作，我很难准确地找出到底是什么出了问题

它与常规的嵌入式表单集合没有什么不同

但是，如果您想避免默认的

\uu NAME\uuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuuu

发件人：

原型机名称

类型：字符串默认值：名称
如果表单中有多个集合，或者更糟的是嵌套集合，则可能需要更改占位符，以便不使用相同的值替换不相关的占位符

如果你想用javascript抽象你的克隆动作，比如（粘贴在下面）中的那些动作，这会非常有帮助，顺便说一下，这些动作似乎是针对symfony3的

例如，您可能希望将传递给
prototype\u name
的相同值作为集合持有者html上的attr包含在内，以便在
数据原型
html上执行
替换
时动态访问它

var $collectionHolder;

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
// Get the ul that holds the collection of tags
$collectionHolder = $('ul.tags');

// add the "add a tag" anchor and li to the tags 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);

$addTagLink.on('click', function(e) {
    // prevent the link from creating a "#" on the URL
    e.preventDefault();

    // add a new tag form (see next code block)
    addTagForm($collectionHolder, $newLinkLi);
});

function addTagForm($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 tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}

var$collectionHolder；
//设置“添加标签”链接
变量$addTagLink=$（''）；
变量$newLinkLi=$（'
'）。追加（$addTagLink）；
jQuery（文档）.ready（函数（）{
//获取保存标签集合的ul
$collectionHolder=$（'ul.tags'）；
//将“添加标签”锚定和li添加到标签ul
$collectionHolder.append（$newLinkLi）；
//计算我们当前的表单输入（例如2），将其用作新的表单输入
//插入新项目时的索引（例如2）
$collectionHolder.data（'index'，$collectionHolder.find（':input'）.length）；
$addTagLink.on（'click'，函数（e）{
//阻止链接在URL上创建“#”
e、 预防默认值（）；
//添加新的标记表单（请参见下一个代码块）
addTagForm（$collectionHolder，$newLinkLi）；
});
函数addTagForm（$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之前，在页面中的一个li中显示表单
变量$newFormLi=$（'
'）。追加（newForm）；
$newLinkLi.before（$newFormLi）；
}
Hah-我能做些什么来赢回你的欢心吗？@Cameron，你还在吗？我正面临着你正在解决的问题。我不知道你建议如何编写JS代码。我该如何编写“添加子标签”部分？谢谢，@mario-我还在这里。如果你能把问题缩小到更具体的范围，我很乐意帮忙！嘿@Cameron，谢谢回复。在这个例子中，如何编写JS来插入/克隆子标签的表单？我能够为多个标签编写表单，为多个子标签编写表单；我不会编写一个唯一的表单，您可以在其中创建更多标签，并在每个子标签中创建更多标签。我的理解是，您需要混合代码，但我不确定如何编写。（我看了几个小时，有时会晚到周四）嘿，如果你遇到我在回答中无法解决的特定问题，请告诉我。（我看到你在某一点上标记为“已接受”）。出于某种原因，它未被接受！
{{ form_start(form) }}
    {# render the task's only field: description #}
    {{ form_row(form.description) }}

    <h3>Tags</h3>
    <ul class="tags">
        {# iterate over each existing tag and render its only field: name #}
        {% for tag in form.tags %}
            <li>{{ form_row(tag.name) }}</li>
            {% for sub_tag in tag.sub_tags %}
                <li>{{ form_row(sub_tag.name) }}</li>
            {% endfor %}
        {% endfor %}
    </ul>
{{ form_end(form) }}

var $collectionHolder;

// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkLi = $('<li></li>').append($addTagLink);

jQuery(document).ready(function() {
// Get the ul that holds the collection of tags
$collectionHolder = $('ul.tags');

// add the "add a tag" anchor and li to the tags 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);

$addTagLink.on('click', function(e) {
    // prevent the link from creating a "#" on the URL
    e.preventDefault();

    // add a new tag form (see next code block)
    addTagForm($collectionHolder, $newLinkLi);
});

function addTagForm($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 tag" link li
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}