Symfony2 / twig问题渲染集合remove_btn

时间:2014-08-28 16:30:31

标签: forms symfony twig

我们正试图直接在动作模板中呈现不同的表单集合页面。

我们遇到的问题是我们无法呈现widget_remobe_btn按钮。例如,如果我们尝试{{ form_widget(entity.name) }},我们会得到名称。但在这种情况下,我们没有按预期{{ form_widget(entity.vars.widget_remove_btn) }}收到按钮。

如果我们添加{{ form_rest(entity) }}(在每个集合项打印每行的foreach中),“删除”按钮将从表单下方删除,但不会在form_widget标记所在的位置呈现。

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

    <h3>Tags</h3>
        {# iterate over each existing tag and render its only field: name #}
        <table class="table table-bordered table-striped table-hover">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for entity in form.collection %}
                {{ form_start(entity) }}
                    <tr>
                        <td>{{ form_widget(entity.name) }}</td>
                        <td>{{ form_widget(entity.vars.widget_remove_btn) }}</td>
                    </tr>
                {{ form_end(entity) }}
            {% endfor %}
            <tbody>
        </table>
{{ form_end(form) }}

为了防止它变得有用,我们正在使用 MopaBootstrapBundle

1 个答案:

答案 0 :(得分:0)

我们设法使用form_row(entity)而不是row_rest()row_widget()来使其工作,最终表现得像form_rest()那样;即输出按钮。

以下是最终代码:

{{ form_start(form) }}

    <h2>Form</h2>

        <table class="table table-bordered table-striped table-hover collection-table">
            <thead>
                <tr>
                    <th>Op</th>
                    <th>Operation</th>
                    <th>Tools</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
            {% for entity in form.entities %}
                <tr>
                    <td>{{ form_widget(entity.name) }}</td>
                    {{ form_rest(entity) }}
                </tr>
            {% endfor %}
            <tbody>
        </table>
    {{ form_rest(form) }}
{{ form_end(form) }}

然后,为了使按钮哇哇 - 因为我们正在使用 MopaBootstrapBundle - 我们在JavaScript文件中添加了这个片段:

$('.collection-table').on('click.collection.data-api', '[data-collection-remove-btn]', function (e) {
    var $btn = $(e.target);

    if (! $btn.hasClass('btn')) {
        $btn = $btn.closest('.btn');
    }

    $btn.closest('tr').remove();

    e.preventDefault();
});