Question

我有一个表单集合，POI，我想为它添加一个集合用于媒体，但是我无法让JS动态添加/删除嵌套的媒体集合。

poi表单类型 - poi表单类型是另一种形式的集合

public function buildForm(FormBuilderInterface $build, array $options)
{
    $build->add('ID', 'hidden', [
        'required'  => false
    ]);

    parent::buildForm($build, $options);

    $build->add('poiImages', 'collection', [
        'label'             => false,
        'type'              => new ImageType(),
        'allow_add'         => true,
        'allow_delete'      => true
    ]);
}

控制器

public function editAction($id, Application $app, Request $r)
{
    $row = $app['main']->getById($id);
    $imagesRow = $app['main_media']->getByParentId($id, 'image');
    $poiRow = $app['main_poi']->getByParentId($id);

    $collection = array_merge($row, [
        'images'    => $imagesRow,
        'pois'      => $poiRow,
    ]);

    $form = $app['form.factory']->create(new MainEditForm(), $collection);
    $form->handleRequest($r);

Twig模板部分

<div class="form-group destination-poi collection">
        <h3>Add POI</h3>
        <ul id="poi_collection" class="list-unstyled row" data-prototype="{{ form_widget(form.pois.vars.prototype)|e }}">
            {% for poi in form.pois %}
                {% set key = loop.index0 %}
                <script id="key" type="text/template">
                    {{ key }}
                </script>
                <li class="col-md-12">
                    {{ form_row(poi) }}

                    <ul id="poi_images_collection_{{ key }}" class="collection list-unstyped row" data-prototype="{{ form_widget(poi.poiImages.vars.prototype)|e }}">
                        {% for poiImage in poi.poiImages %}
                            <li class="col-md-3">

                                <div class="hidden">{{ form_row(image.fullUrl) }}</div>
                                {{ form_row(poiImage.ID) }}
                                {{ form_row(poiImage.sequence) }}
                                {{ form_row(poiImage.caption) }}
                                {{ form_row(poiImage.altText) }}
                                {{ form_row(poiImage.credit) }}

                                <a href="#" class="btn-remove">Remove Image</a>
                            </li>
                        {% endfor %}
                    </ul>
                    <a class="btn-add btn btn-default" data-target="poi_images_collection_{{ key }}">Add Image</a>

                    <a href="#" class="btn-remove">Remove POI</a>
                </li>
            {% endfor %}
        </ul>
        <a class="btn-add btn btn-default" data-target="poi_collection">Add POI</a>
    </div>

有谁知道我会用什么来添加/删除这些嵌套集合？人们可以为每个POI添加多个POI和多个媒体

Answer 1

所有内容都写在文档中：

http://symfony.com/doc/current/cookbook/form/form_collections.html

提取：

Twig ：

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

<强>的js ：

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);
}

要删除项目，请查看文档，不要添加更多复制粘贴...

如何在silex中管理嵌套表单集合

1 个答案: