javascript - 我如何处理具有两个 CollectionType 子表单的 Symfony 表单？

Question

我一直在关注 Symfony 指南 here它描述了如何生成(并刷新到数据库)表单中关联实体的集合。

我已经遵循了该示例，并且它完全按照预期工作(添加和删除)，但是，在我实际需要它的情况下，我有两个关联的实体:

• 任务-<标签
• 任务-<人员

prototype第二部分的内容很清楚:

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

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

但是，对于脚本的更改，我不知道如何进行，因为我对 javascript/jQuery 没有太多经验。我应该创建一个单独的 jQuery(document).ready(function() {}函数来处理第二个关联实体，或者我应该将其集成到这个现有的 block 中？

仅针对一个关联实体的我的功能脚本(来自 Twig 模板)是:

<script>
    var $addTagsLink = $('<a href="#" class="add_Tags_link">Add a Tag</a>');
    var $newLinkLi = $('<li></li>').append($addTagsLink);
    jQuery(document).ready(function() {
        // Get the ul that holds the collection of tags
        $collectionHolder = $('ul.Tags');
        // add a delete link to all of the existing tag form li elements
        $collectionHolder.find('li').each(function() {
            addTagsFormDeleteLink($(this));
        });
        // 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);
        $addTagsLink.on('click', function(e) {
            // prevent the link from creating a "#" on the URL
            e.preventDefault();
            // add a new tag form (see next code block)
            addTagsForm($collectionHolder, $newLinkLi);
        });
    });
    function addTagsFormDeleteLink($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
            e.preventDefault();
            // remove the li for the tag form
            $TagFormLi.remove();
        });
    }
    function addTagsForm($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);
        // add a delete link to the new form
        addTagsFormDeleteLink($newFormLi);
        $newLinkLi.before($newFormLi);
    }
</script>

Answer 1

您可以通过添加链接文本作为参数来使 addTagsFormDeleteLink 和 addTagsForm 这两个函数通用。所以你不要重复它们。这里我将它们重命名为 addFormDeleteLink 和 addForm。

其余代码可以复制，或插入 $.each() JQuery iterator 。代码重复(对于只有两个项目，我发现它更简单，即使不太优雅):

// "Add a Tag" link
var $addTagsLink = $('<a href="#" class="add_Tags_link">Add a Tag</a>');
var $newTagLinkLi = $('<li></li>').append($addTagsLink);

// "Add a Person" link
var $addPersonsLink = $('<a href="#" class="add_Persons_link">Add a Person</a>');
var $newPersonLinkLi = $('<li></li>').append($addPersonsLink);


jQuery(document).ready(function() {

    //-- Tags --

    // Get the ul that holds the collection of tags
    $tagsCollectionHolder = $('ul.Tags');
    // add a delete link to all of the existing tag form li elements
    $tagsCollectionHolder.find('li').each(function() {
        addFormDeleteLink($(this), 'delete this Tag');
    });
    // add the "add a tag" anchor and li to the tags ul
    $tagsCollectionHolder.append($newTagLinkLi);
    // count the current form inputs we have (e.g. 2), use that as the new
    // index when inserting a new item (e.g. 2)
    $tagsCollectionHolder.data('index', $tagsCollectionHolder.find(':input').length);
    $addTagsLink.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();
        // add a new tag form (see next code block)
        addForm($tagsCollectionHolder, $newTagLinkLi, 'delete this Tag');
    });

    //-- Persons --

    $personsCollectionHolder = $('ul.persons');
    $personsCollectionHolder.find('li').each(function() {
        addFormDeleteLink($(this), 'delete this Person');
    });
    $personsCollectionHolder.append($newPersonLinkLi);
    $personsCollectionHolder.data('index', $personsCollectionHolder.find(':input').length);
    $addPersonsLink.on('click', function(e) {
        e.preventDefault();
        addForm($personsCollectionHolder, $newPersonLinkLi, 'delete this Person');
    });
});

function addFormDeleteLink($formLi, $anchor) {
    var $removeFormA = $('<a href="#">' + $anchor + '</a>');
    $formLi.append($removeFormA);
    $removeFormA.on('click', function(e) {
        // prevent the link from creating a "#" on the URL
        e.preventDefault();
        // remove the li for the form
        $formLi.remove();
    });
}

function addForm($collectionHolder, $newLinkLi, $deleteText) {
    // 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/person" link li
    var $newFormLi = $('<li></li>').append(newForm);
    // add a delete link to the new form
    addFormDeleteLink($newFormLi, $deleteText);
    $newLinkLi.before($newFormLi);
}