Как настроить data-prototype в коллекциях форм symfony2?

Question

В моей форме есть коллекция скрытых полей.

<ul id="user_roles">
  <li><hidden field value="role1"></li>
  <li><hidden field value="role2"></li>
  (...)
</ul>

Я использую jQuery (и прототип данных) для добавления новых ролей.

Проблема в том, что я хотел бы сделать что-то вроде этого:

<ul id="user_roles">
  <li>role1 <hidden field value="role1"></li>
  <li>role2 <hidden field value="role2"></li>
  (...)
</ul>

Нет проблем с начальным рендерингом: я просто поставил:

{% for role in roles %}
 <li> {{ role }} {{ form_row(role) }} </li>
{% endfor %}

Но прототип данных по умолчанию будет отображать только {{form_row (role)}} (скрытое поле).

Где я должен изменить прототип данных по умолчанию?

В form_div_layout.html нет {% block prototype%}, который я мог бы настроить ....

Answer 1

Виджет коллекции определяется следующим образом:

{% block collection_widget %}
{% spaceless %}
    {% if prototype is defined %}
        {% set attr = attr|merge({'data-prototype': form_row(prototype) }) %}
    {% endif %}
    {{ block('form_widget') }}
{% endspaceless %}
{% endblock collection_widget %}

Таким образом, вы можете отменить это, чтобы получить контроль над тем, как вы хотите воспроизвести прототип.

Answer 2

Вы также можете получить доступ к прототипу изнутри шаблона, вызвав role.vars.prototype и позже использовать его в своем JS. Если вы хотите поместить его в data-prototype атрибут div (как это обычно делается), вы должны помнить, чтобы избежать его:

<div data-prototype="{{ form_row(roles.vars.prototype) | escape }}">
  {% for role in roles %}
    <li> {{ role }} {{ form_row(role) }} </li>
  {% endfor %}
</div>

Answer 3

Метод, рекомендуемый в документах , позволяет легко настраивать каждую коллекцию независимо внутри вашего приложения, все в одном файле.

• Создать файл prototype_layout.html.twig:

  {% block _myform_mycollection_entry_row %}
      <div class="row">
          <div class="col-sm-6">{{ form_row(form.title) }}</div>
          <div class="col-sm-6">{{ form_row(form.author) }}</div>
      </div>
  {% endblock %}
  

Название блока имеет важное значение. Первая часть будет _myform, если ваша родительская форма называется MyformType, а вторая часть _mycollection, если ваше поле формы, владеющее коллекцией, называется так. Третья часть всегда должна быть _entry_row, чтобы это работало.

Например, если у вас есть форма UserType с коллекцией 'books', имя блока может быть _user_books_entry_row

Чтобы убедиться, что вы правильно поняли имя, добавьте подчиненную форму (нажав кнопку «Добавить», добавляя подчиненные формы с помощью javascript) и проверьте идентификатор соответствующего HTML-элемента select, используя инструмент инспектора вашего браузера.

Если это выглядит как user_books_0_title, тогда имя блока будет _user_books_entry_row

• Объявите этот файл как глобальную тему формы в разделе веток config.yml:

  twig:
      form_themes:
          - 'AppBundle:Form:prototype_layout.html.twig' #adapt this path if you saved your file elsewhere
  

• Вы также можете использовать файл непосредственно в виде формы:

{% use "AppBundle:Form:prototype_layout.html.twig" %}