Symfony 2 양식에서 데이터 프로토 타입 속성을 사용자 정의하는 방법
수십 일 이후로 나는 Symfony 2 및 양식의 문제를 차단합니다.
나는 웹 사이트 엔티티의 한 형태를 얻었다. "웹 사이트"는 웹 사이트의 엔티티 모음이며 각 웹 사이트에는 "유형"과 "URL"이라는 두 가지 속성이 있습니다.
데이터베이스에 하나의 웹 사이트를 더 추가하려면 "다른 웹 사이트 추가"링크를 클릭하여 양식에 다른 웹 사이트 행을 추가합니다. 따라서 제출 버튼을 클릭하면 하나 또는 X 개의 웹 사이트를 동시에 추가 할 수 있습니다.
행을 추가하는이 프로세스는 웹 사이트 하위 양식을 생성 할 수있는 data-prototype 속성을 사용합니다.
문제는 훌륭한 그래픽 렌더링을 갖도록 양식을 사용자 정의한다는 것입니다.
<div class="informations_widget">{{ form_widget(website.type.code) }}</div>
<div class="informations_error">{{ form_errors(website.type) }}</div>
<div class="informations_widget">{{ form_widget(website.url) }}</div>
<div class="informations_error">{{ form_errors(website.url) }}</div>
그러나 데이터 프로토 타입은 HTML 및 CSS 태그 및 속성을 사용하여 이러한 사용자 정의에 관심이 없습니다. 나는 Symfony 렌더링을 유지합니다.
<div>
<label class=" required">$$name$$</label>
<div id="jobcast_profilebundle_websitestype_websites_$$name$$">
<div>
<label class=" required">Type</label>
<div id="jobcast_profilebundle_websitestype_websites_$$name$$_type">
<div>
<label for="jobcast_profilebundle_websitestype_websites_$$name$$_type_code" class=" required">label</label>
<select id="jobcast_profilebundle_websitestype_websites_$$name$$_type_code" name="jobcast_profilebundle_websitestype[websites][$$name$$][type][code]" required="required">
<option value="WEB-OTHER">Autre</option>
<option value="WEB-RSS">Flux RSS</option>
...
</select>
</div>
</div>
</div>
<div>
<label for="jobcast_profilebundle_websitestype_websites_$$name$$_url" class=" required">Adresse</label>
<input type="url" id="jobcast_profilebundle_websitestype_websites_$$name$$_url" name="jobcast_profilebundle_websitestype[websites][$$name$$][url]" required="required" value="" />
</div>
</div>
</div>
누구든지 그 해킹을 할 아이디어가 있습니까?
조금 오래되었지만 여기에 치명적인 간단한 해결책이 있습니다.
아이디어는 단순히 Twig 템플릿을 통해 컬렉션 항목을 렌더링하는 것이므로 data-prototype="..."태그에 배치 할 프로토 타입을 완전히 사용자 지정할 수 있습니다 . 마치 평범하고 평범한 형태 인 것처럼.
yourMainForm.html.twig에서 :
<div id="collectionContainer"
data-prototype="
{% filter escape %}
{{ include('MyBundle:MyViewsDirectory:prototype.html.twig', { 'form': form.myForm.vars.prototype }) }}
{% endfilter %}">
</div>
그리고 MyBundle : MyViewsDirectory : prototype.html.twig에서 :
<div>
<!-- customize as you wish -->
{{ form_label(form.field1) }}
{{ form_widget(form.field1) }}
{{ form_label(form.field2) }}
{{ form_widget(form.field2) }}
</div>
크레딧 : https://gist.github.com/tobalgists/4032213 에서 수정 됨
나는이 질문이 꽤 오래되었다는 것을 알고 있지만 나는 같은 문제를 가지고 있었고 이것이 내가 그것을 뿌린 방법입니다. 나는 macro이것을 달성하기 위해 나뭇 가지 를 사용하고있다. 매크로는 함수와 같으며 다른 인수로 렌더링 할 수 있습니다.
{% macro information_prototype(website) %}
<div class="informations_widget">{{ form_widget(website.type.code) }}</div>
<div class="informations_error">{{ form_errors(website.type) }}</div>
<div class="informations_widget">{{ form_widget(website.url) }}</div>
<div class="informations_error">{{ form_errors(website.url) }}</div>
{% endmacro %}
이제 원하는 곳에이 매크로를 렌더링 할 수 있습니다. 주 information_prototype()매크로의 이름 만입니다, 당신은 당신이 원하는대로 그 이름을 지정할 수 있습니다. 매크로를 사용하여 주어진 항목과 프로토 타입을 같은 방식으로 렌더링하려면 다음과 같이하십시오.
<div class="collection" data-prototype="{{ _self.information_prototype(form.websites.vars.prototype)|e }}">
{% for website in form.websites %}
{{ _self.information_prototype(website) }}
{% endfor %}
<button class="add-collection">Add Information</button>
</div>
form.websites.vars.prototypeprototype_name지정한 양식의 프로토 타입 데이터를 보유 합니다. 사용 _self.+macroname같은 템플릿에 매크로를 사용하려는 경우.
Twig 문서 에서 매크로에 대해 자세히 알아볼 수 있습니다.
당신은 아마 그 이후로 알았을 것입니다. 그러나 여기에 다른 사람들을위한 해결책이 있습니다.
새 템플릿을 만들고 여기에 다음 코드를 복사 / 붙여 넣기 : https://gist.github.com/1294186
그런 다음 사용자 지정하려는 양식이 포함 된 템플릿에서 다음을 수행하여 양식에 적용합니다.
{% form_theme form 'YourBundle:Deal:Theme/_field-prototype.html.twig' %}
최근 비슷한 문제가 발생했습니다. 다음은 html에서 명시 적으로 설정하지 않고도 컬렉션 프로토 타입을 재정의하는 방법입니다.
{% set customPrototype %}
{% filter escape %}
{% include 'AcmeBundle:Controller:customCollectionPrototype.html.twig' with { 'form': form.collection.vars.prototype } %}
{% endfilter %}
{% endset %}
{{ form_label(form.collection) }}
{{ form_widget(form.collection, { 'attr': { 'data-prototype': customPrototype } }) }}
사용자 지정 나뭇 가지에서 원하는대로 할 수 있습니다. 예를 들면 :
<div data-form-collection="item" data-form-collection-index="__name__" class="collection-item">
<div class="collection-box col-sm-10 col-sm-offset-2 padding-top-20">
<div class="row form-horizontal form-group">
<div class="col-sm-4">
{{ form_label(form.field0) }}
{{ form_widget(form.field0) }}
</div>
<div class="col-sm-3">
{{ form_label(form.field1) }}
{{ form_widget(form.field1) }}
</div>
<label class="col-sm-3 control-label text-right">
<button data-form-collection="delete" class="btn btn-danger">
<i class="fa fa-times collection-button-remove"></i>{{ 'form.collection.delete'|trans }}
</button>
</label>
</div>
</div>
특정 위치에서만 수행해야하고 모든 컬렉션에 적용되는 전역 재정의가 필요하지 않을 때 유용합니다.
답변이 매우 늦었지만 방문자에게 유용 할 수 있습니다.
테마 파일에서 다음과 같이 웹 사이트 위젯의 모든 컬렉션 항목을 렌더링하는 데 하나의 블록을 사용할 수 있습니다.
{% block _jobcast_profilebundle_websitestype_websites_entry_widget %}
<div class="informations_widget">{{ form_widget(form.type.code) }}</div>
<div class="informations_error">{{ form_errors(form.type) }}</div>
<div class="informations_widget">{{ form_widget(form.url) }}</div>
<div class="informations_error">{{ form_errors(form.url) }}</div>
{% endblock %}
또한 다음과 같이 컬렉션 위젯 행에 대한 테마 블록을 만듭니다.
{% block _quiz_question_answers_row %}
{% if prototype is defined %}
{%- set attr = attr | merge({'data-prototype': form_row(prototype) }) -%}
{% endif %}
{{ form_errors(form) }}
{% for child in form %}
{{ form_row(child) }}
{% endfor %}
{% endblock %}
이제 프로토 타입과 렌더링 된 컬렉션 항목이 동일합니다.
비슷한 문제가있었습니다. 귀하의 사례를 위해 작동하도록 이것을 조정해야 할 수도 있지만 누군가가 도움이 될 수 있습니다.
사용자 지정 양식 '테마'를 보관할 새 템플릿 파일을 만듭니다.
./src/Company/TestBundle/Resources/views/Forms/fields.html.twig
일반적으로 form_row 함수를 사용하여 필드의 레이블, 오류 및 위젯을 표시 할 수 있습니다 . 하지만 제 경우에는 위젯을 표시하고 싶었습니다. 말했듯이 데이터 프로토 타입 기능을 사용하면 레이블도 표시되므로 새 fields.html.twig에 원하는 필드 모양에 대한 사용자 정의 코드를 입력합니다.
{% block form_row %}
{% spaceless %}
{{ form_widget(form) }}
{% endspaceless %}
{% endblock form_row %}
컨테이너 div, 레이블 및 오류를 제거하고 위젯을 그대로 두었습니다.
이제 양식을 표시하는 twig 파일에서 {% extends ... %} 뒤에 이것을 추가하면됩니다.
{% form_theme form 'CompanyTestBundle:Form:fields.html.twig' %}
이제 form_widget (form.yourVariable.var.prototype)은 필드 만 렌더링하고 다른 것은 렌더링하지 않습니다.
응용 프로그램 전체 양식 테마가 프로토 타입에 적용됩니다. 응용 프로그램 전체 사용자 지정을 참조하십시오.
다음은 사용자 지정 데이터 프로토 타입의 샘플 코드입니다.
{{ form_widget(form.emails.get('prototype')) | e }}
어디 emails-컬렉션.
To customize differently existing collection items VS prototype, you can override collection_widget like this:
{%- block collection_widget -%}
{% if prototype is defined %}
{%- set attr = attr|merge({'data-prototype': form_row(prototype, {'inPrototype': true} ) }) -%}
{% endif %}
{{- block('form_widget') -}}
{%- endblock collection_widget -%}
And then in your custom entry:
{% block _myCollection_entry_row %}
{% if(inPrototype is defined) %}
{# Something special only for prototype here #}
{% endif %}
{% endblock %}
If you do not need to define a template system-wide, simply set a template in your twig template, and ask twig to use it.
{# using the profiler, you can find the block widget tested by twig #}
{% block my_block_widget %}
<div >
<p>My template for collection</p>
<div >
{{ form_row(form.field1)}}
</div>
<div>
{{ form_row(form.field2)}}
</div>
</div>
{% endblock %}
{% form_theme form.my_collection _self %}
<button data-form-prototype="{{ form_widget(form.my_collection.vars.prototype) )|e }}" >Add a new entry</button>
This post focuses on using pre-existing conventions within the twig template.
Basing off "How to Embed a Collection of Forms" from the Symfony Cookbook (http://symfony.com/doc/master/cookbook/form/form_collections.html), you can just enter whatever html_escaped form data you wish in the data-prototype (maybe considered a hack, but works wonderfully) and only pages using that template will change.
In the example, they tell you to put:
<ul class="tags" data-prototype="{{ form_widget(form.tags.vars.prototype)|e }}">
...
</ul>
This can be successfully replaced with something such as:
<table class="tags" data-prototype="<tr> <td><div><input type="text" id="task_tags__name__tagId" name="task[tags][__name__][taskId]" disabled="disabled" required="required" size="10" value="" /></div></td> <td><div><input type="text" id="task_tags__name__tagName" name="task[tags[__name__][tagName]" required="required" value="" /></div></td></tr>">
<tr>
<th>Id</th>
<th>Name</th>
</tr>
<tr>
...pre existing data here...
</tr>
</table>
Where the data-type attribute of the table with the class "tags" above is the html-escaped version (and line breaks removed though spaces are ok and required) of:
<tr>
<td><div><input type="text" id="task_tags__name__tagId" name="task[tags][__name__][taskId]" disabled="disabled" required="required" size="10" value="" /></div></td>
<td><div><input type="text" id="task_tags__name__tagName" name="task[tags[__name__][tagName]" required="required" value="" /></div></td>
</tr>
...but you must also adjust the javascript in the example to add tr's instead of li elements:
function addTagForm(collectionHolder, $newLinkTr) {
...
// Display the form in the page in an tr, before the "Add a question" link tr
var $newFormTr = $('<tr></tr>').append(newForm);
...
};
...
// setup an "add a tag" link
var $addTagLink = $('<a href="#" class="add_tag_link">Add a tag</a>');
var $newLinkTr = $('<tr></tr>').append($addTagLink);
...
For me, the next step is figuring out how to define the prototype in an external file that I can somehow call in the twig template for the data-prototype that dynamically works with the form. Something like:
<table class="tags" data-prototype="{{somefunction('App\Bundle\Views\Entity\TagsPrototypeInTable')}}">
So if one of the other posts is describing this and I am too dense or if someone knows how to do such, say so!
There is a link to something from gitHub from Francois, but I didn't see any explanation so I think that is probably the more dynamic method I'll get to one of these near-future days.
Peace, Steve
Update:
One can also use just parts of the prototype:
data-prototype="<tr> <td>{{ form_row(form.tags.vars.prototype.tagId) | e }}</td> <td>{{ form_row(form.tags.vars.prototype.tagName) | e }}</td></tr>"
Where the data-type attribute of the table with the class "tags" above is the html-escaped version (and line breaks removed though spaces are ok and required) of:
<td>{{ form_row(form.tags.vars.prototype.tagId) | e }}</td>
<td>{{ form_row(form.tags.vars.prototype.tagName) | e }}</td>
(I used http://www.htmlescape.net/htmlescape_tool.html.)
Symfony will replace the information between the {{}} with an html_escaped (because of the "|e") rendered field when the page is rendered. In this way, any customization at the field-level is not lost, but! you must manually add and remove fields to the prototype as you do so with the entity :)
ReferenceURL : https://stackoverflow.com/questions/7555702/how-to-customize-the-data-prototype-attribute-in-symfony-2-forms
'programing' 카테고리의 다른 글
| Ubuntu에서 xdebug를 사용할 수 있습니까? (0) | 2021.01.16 |
|---|---|
| YAML이 마크 업 언어가 아닌 경우 무엇입니까? (0) | 2021.01.16 |
| UILabel 높이를 채우기 위해 글꼴 크기를 설정하는 방법은 무엇입니까? (0) | 2021.01.16 |
| Scala의 숨겨진 성능 비용? (0) | 2021.01.16 |
| git push : refs / heads / my / subbranch exists, cannot create (0) | 2021.01.16 |