2011-09-26 12 views
11

sto cercando di implementare qualcosa di simile:HTML in Symfony2 etichette forma al posto del testo normale

<div> 
    <input type="checkbox" name="checkbox" id="checkbox_id" /> 
    <label for="checkbox_id">I agree to the <a href="/tos">Terms of Service</a></label> 
</div> 

Il più vicino sono venuto a implementare questo è attraverso:

<div> 
    {{ form_widget(form.agreeWithTos) }} 
    <label for="{{ form.agreeWithTos.vars.id }}">I agree to the <a href="#">Terms of Service</a></label> 
</div> 

C'è un modo migliore? Dover specificare {{form.agreeWithTos.vars.id}} è inelegante. :)

+1

Qual è il tuo problema esattamente? –

risposta

1

Penso che stiate cercando form theming. In questo modo sei in grado di stilare ogni parte del modulo, in un file indipendente, in ogni caso, e poi semplicemente renderlo in modo "elegante", riga per riga con {{ form_row(form) }} o semplicemente con {{ form_widget(form) }}. Dipende da te come lo hai impostato.

9

risolto questo problema utilizzando il seguente codice nella mia forma-tema:

{# ---- form-theme.html.twig #} 
{% block checkbox_row %} 
{% spaceless %} 
<div> 
    {{ form_errors(form) }} 

    <label class="checkbox" for="{{ form.vars.id }}"> 
     {{ form_widget(form) }} 
     {{ label|default(form_label(form)) | raw }} 
    </label> 
</div> 
{% endspaceless %} 
{% endblock %} 

nel modulo-Template è possibile utilizzare:

{% form_theme form '::form-theme.html.twig' %} 

{{form_row(form.termsOfServiceAccepted, { 
     'label' : 'I have read and agree to the <a href="#">Terms and conditions</a>' 
    }) 
}} 

in questo modo, il blocco dal form- il tema si applica a qualsiasi checkbox sulla pagina. Se si deve usare anche il default-tema, è possibile aggiungere un parametro per consentire speciale rendering:

{# ---- form-theme.html.twig #} 
{% block checkbox_row %} 
{% spaceless %} 
    {% if not useTosStyle %} 
     {{ parent() }} 
    {% else %} 
     {# ... special rendering ... #} 
    {% endif %} 
{% endspaceless %} 
{% endblock %} 

che sarebbe utilizzato come questo:

{% form_theme form '::form-theme.html.twig' %} 

{{form_row(form.termsOfServiceAccepted, { 
     'useTosStyle' : true, 
     'label' : 'I have read and agree to the <a href="#">Terms and conditions</a>' 
    }) 
}} 
0

Quindi formare tematizzazione è piuttosto complicato. La cosa più semplice che ho trovato è quella di sopprimere l'etichetta del campo ('label'=> false nella classe del modulo Symfony) e quindi aggiungere l'etichetta html nella ramoscello html.

0

Ho battuto la testa per questo, poi ho avuto un momento di eureka. Il modo più semplice per farlo: DA FAR è creare un'estensione Twig.

Ecco il mio codice Twig:

{# twig example #} 
{% block form_label %} 
    {% set label = parent() %} 
    {{ label|unescape|raw }} 
{% endblock %} 

e PHP:

<?php 
new Twig_SimpleFilter('unescape', function($value) { 
    return html_entity_decode($value); 
}); 

Un paio di note:

  • Questa sequenza non di escape tutti precedentemente sfuggito codice. Dovresti assolutamente scappare dopo, se necessario.
  • Ciò richiede un tag extends per il tema del modulo di destinazione nel tema del modulo personalizzato che è possibile utilizzare nei moduli successivi. Inserisci il codice della ramoscella in un tema del modulo personalizzato e sostituisci i riferimenti al tuo altro tema/temi del modulo con questo.

Complessivamente questa è la più piccola riga di codice per il risultato più grande e migliore che sono riuscito a trovare. È anche ultra portatile e ASCIUTTO: puoi estendere qualsiasi tema del modulo e l'etichetta cambierà senza che tu modifichi il resto del codice.

0

Si potrebbe sfruttare la forma tematizzazione in un altro modo: si potrebbe spostare il tag <label>di fuori la funzione form_label().

creare un tema modulo personalizzato, e per le caselle di controllo spostare solo il tag <label> di fuori della funzione form_label:

{% block checkbox_row %} 
    <label>{{ form_label(form) }}</label> 
    {{ form_errors(form) }} 
    {{ form_widget(form) }} 
{% endblock checkbox_row %} 

{% block checkbox_label %} 
    {{ label }} 
{% endblock checkbox_label %} 

Ora, nella vostra teplate, l'override del label della vostra casella di controllo, e quindi efficacemente iniettare codice HTML nel label function:

{% form_theme form 'yourtheme.html.twig' _self %} 

{% block _your_TOS_checkbox_label %} 
    I agree with <a href="#" target="_blank">terms and conditions</a> 
{% endblock _your_TOS_checkbox_label %} 
Problemi correlati