如何嵌入表单(字段)集合

// src/AppBundle/Entity/Task.php
namespace AppBundle\Entity;
 
use Doctrine\Common\Collections\ArrayCollection;
 
class Task
{
    protected $description;
 
    protected $tags;
 
    public function __construct()
    {
        $this->tags = new ArrayCollection();
    }
 
    public function getDescription()
    {
        return $this->description;
    }
 
    public function setDescription($description)
    {
        $this->description = $description;
    }
 
    public function getTags()
    {
        return $this->tags;
    }
}

// src/AppBundle/Entity/Tag.php
namespace AppBundle\Entity;
 
class Tag
{
    private $name;
 
    public function getName()
    {
        return $this->name;
    }
 
    public function setName($name)
    {
        $this->name = $name;
    }
}

// src/AppBundle/Form/Type/TagType.php
namespace AppBundle\Form\Type;
 
use AppBundle\Entity\Tag;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
 
class TagType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('name');
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => Tag::class,
        ));
    }
}

// src/AppBundle/Form/Type/TaskType.php
namespace AppBundle\Form\Type;
 
use AppBundle\Entity\Task;
use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;
use Symfony\Component\OptionsResolver\OptionsResolver;
use Symfony\Component\Form\Extension\Core\Type\CollectionType;
 
class TaskType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('description');
 
        $builder->add('tags', CollectionType::class, array(
            'entry_type' => TagType::class
        ));
    }
 
    public function configureOptions(OptionsResolver $resolver)
    {
        $resolver->setDefaults(array(
            'data_class' => Task::class,
        ));
    }
}

// src/AppBundle/Controller/TaskController.php
namespace AppBundle\Controller;
 
use AppBundle\Entity\Task;
use AppBundle\Entity\Tag;
use AppBundle\Form\Type\TaskType;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
 
class TaskController extends Controller
{
    public function newAction(Request $request)
    {
        $task = new Task();
 
        // dummy code - this is here just so that the Task has some tags
        // otherwise, this isn't an interesting example
        // 充数代码 - 仅在这里出现，以便Task能有一些tags
        // 否则，这就不是一个有意义的例子了
        $tag1 = new Tag();
        $tag1->setName('tag1');
        $task->getTags()->add($tag1);
        $tag2 = new Tag();
        $tag2->setName('tag2');
        $task->getTags()->add($tag2);
        // end dummy code / 充数代码结束
 
        $form = $this->createForm(TaskType::class, $task);
 
        $form->handleRequest($request);
 
        if ($form->isSubmitted() && $form->isValid()) {
            // ... maybe do some form processing, like saving the Task and Tag objects
            // ... 不妨进行一些表单处理，像是存住Task和Tag对象
        }
 
        return $this->render('task/new.html.twig', array(
            'form' => $form->createView(),
        ));
    }
}

// src/AppBundle/Form/Type/TaskType.php
 
// ...
use Symfony\Component\Form\FormBuilderInterface;
 
public function buildForm(FormBuilderInterface $builder, array $options)
{
    $builder->add('description');
 
    $builder->add('tags', CollectionType::class, array(
        'entry_type'   => TagType::class,
        'allow_add'    => true,
    ));
}

<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e('html_attr') }}">
    ...
</ul>

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
    // 得到持有标签集合的ul
    $collectionHolder = $('ul.tags');
 
    // add the "add a tag" anchor and li to the tags ul
    // 添加 "添加一个标签" 锚记到标签的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)
    // 计算我们当前持有的表单input数量（如2），并在插入新元素（如2）时把它作为新的索引
    $collectionHolder.data('index', $collectionHolder.find(':input').length);
 
    $addTagLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        // 防止链接在URL中出现一个 "#"
        e.preventDefault();
 
        // add a new tag form (see next code block)
        // 添加一个新的tag表单（参考后面的码段）
        addTagForm($collectionHolder, $newLinkLi);
    });
});

function addTagForm($collectionHolder, $newLinkLi) {
    // Get the data-prototype explained earlier
    // 获取前文解释过的data-prototype
    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
    // 在prototype的HTML中替换 '__name__'，令其成为一个基于“我们持有多少元素”的数字
    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
    // 在页面中的 "Add a tag" 链接前面，以li来显示表单 
    var $newFormLi = $('<li></li>').append(newForm);
    $newLinkLi.before($newFormLi);
}

// src/AppBundle/Entity/Task.php
namespace AppBundle\Entity;
 
// ...
class Task
{
    // ...
 
    public function addTag(Tag $tag)
    {
        $this->tags->add($tag);
    }
 
    public function removeTag(Tag $tag)
    {
        // ...
    }
}

// src/AppBundle/Form/Type/TaskType.php
 
// ...
public function buildForm(FormBuilderInterface $builder, array $options)
{
    // ...
 
    $builder->add('tags', CollectionType::class, array(
        // ...
        'by_reference' => false,
    ));
}

// src/AppBundle/Form/Type/TaskType.php
 
// ...
public function buildForm(FormBuilderInterface $builder, array $options)
{
    // ...
 
    $builder->add('tags', CollectionType::class, array(
        // ...
        'allow_delete' => true,
    ));
}

// src/AppBundle/Entity/Task.php
 
// ...
class Task
{
    // ...
 
    public function removeTag(Tag $tag)
    {
        $this->tags->removeElement($tag);
    }
}

jQuery(document).ready(function() {
    // Get the ul that holds the collection of tags
    // 获取到持有“标签集合”的ul
    $collectionHolder = $('ul.tags');
 
    // add a delete link to all of the existing tag form li elements
    // 在所有已有的tag表单的li中添加一个删除链接
    $collectionHolder.find('li').each(function() {
        addTagFormDeleteLink($(this));
    });
 
    // ... the rest of the block from above
    // ...上述区块中的其余部分
});
 
function addTagForm() {
    // ...
 
    // add a delete link to the new form
    // 添加一个“删除”链接到新的表单中
    addTagFormDeleteLink($newFormLi);
}

function addTagFormDeleteLink($tagFormLi) {
    var $removeFormA = $('<a href="#">delete this tag</a>');
    $tagFormLi.append($removeFormA);
 
    $removeFormA.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        // 防止链接在URL中出现一个 "#"
        e.preventDefault();
 
        // remove the li for the tag form
        // 
        $tagFormLi.remove();
    });
}