Twig rendre vs comprennent - Quand et où utiliser l'un ou l'autre?

Il existe de grandes différences entre {% render %} et {% include %}.

• {% render %} balise appelle une action : lorsque vous faites cela, vous êtes l'exécution d'un contrôleur, la création d'un nouveau contexte à l'intérieur de ce contrôleur et rend une vue qui sera ajouté à votre vue actuelle.

• {% include %} balise comprend un autre fichier twig dans l'actuel : il n'y a pas d'action, de façon à ce que la fichier inclus permettra d'utiliser votre contexte actuel (ou le contexte vous donner comme paramètre) pour rendre la vue.

Nous allons voir que dans les détails.

---

Un {% render %} exemple

Render est une balise qui appelle une action de la même façon que si vous étiez en appelant à l'aide d'un itinéraire, mais en interne, sans HTTP transactions. Personnellement, je suis en utilisant {% render %} lorsque le contenu de mon point de vue, doivent être actualisés à l'aide d'ajax. De cette façon, je suis en mesure d'appeler la même action à l'aide du routage standard quand il y a des interactions à l'intérieur de ma page.

Envisager une simple page avec ajax formulaire qui vous permet d'ajouter des animaux, et de la dynamique d'une actualisation de la table des aliments.

Les Trucs entité

<?php

//src/Fuz/HomeBundle/Entity/StuffData.php

namespace Fuz\HomeBundle\Entity;

class StuffData
{

    private $stuff;

    public function getStuff()
    {
        return $this->stuff;
    }

    public function setStuff($stuff)
    {
        $this->stuff = $stuff;
        return $this;
    }

}

Les Trucs forme

<?php

//src/Fuz/HomeBundle/Form/StuffType.php

namespace Fuz\HomeBundle\Form;

use Symfony\Component\Form\AbstractType;
use Symfony\Component\Form\FormBuilderInterface;

class StuffType extends AbstractType
{

    public function buildForm(FormBuilderInterface $builder, array $options)
    {
        $builder->add('stuff', 'text', array('label' => ''));
    }

    public function getDefaultOptions(array $options)
    {
        return array (
                'data_class' => 'Fuz\HomeBundle\Entity\StuffData',
        );
    }

    public function getName()
    {
        return "Stuff";
    }

}

Le routage.fichier yml

# src/Fuz/HomeBundle/Resources/config/routing.yml

fuz_home:
    pattern:  /
    defaults: { _controller: FuzHomeBundle:Default:index }

fuz_add_stuff:
    pattern:  /add_stuff
    defaults: { _controller: FuzHomeBundle:Default:addStuff }

fuz_del_stuff:
    pattern:  /del_stuff
    defaults: { _controller: FuzHomeBundle:Default:delStuff }

fuz_list_stuffs:
    pattern:  /list_stuffs
    defaults: { _controller: FuzHomeBundle:Default:listStuffs }

Les contrôleurs de

<?php
namespace Fuz\HomeBundle\Controller;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Fuz\HomeBundle\Entity\StuffData;
use Fuz\HomeBundle\Form\StuffType;
class DefaultController extends Controller
{
/**
* Route : fuz_home
*/
public function indexAction()
{
//Initialize some stuffs, stored in the session instead of in a table for simplicity
if (!$this->get('session')->has('stuffs'))
{
$this->get('session')->set('stuffs', array());
}
//Create the form used to add a stuff
$form = $this->createForm(new StuffType(), new StuffData());
$twigVars = array(
'formAddStuff' => $form->createView(),
);
return $this->render('FuzHomeBundle:Default:index.html.twig', $twigVars);
}
/**
* Route : fuz_add_stuff
*/
public function addStuffAction()
{
$data = new StuffData();
$form = $this->createForm(new StuffType(), $data);
$form->bindRequest($this->getRequest());
if ($form->isValid())
{
$stuffs = $this->get('session')->get('stuffs');
$stuffs[] = $data->getStuff();
$this->get('session')->set('stuffs', $stuffs);
}
return $this->forward("FuzHomeBundle:Default:listStuffs");
}
/**
* Route : fuz_del_stuff
*/
public function delStuffAction()
{
$stuffId = $this->getRequest()->get('stuffId');
$stuffs = $this->get('session')->get('stuffs');
if (array_key_exists($stuffId, $stuffs))
{
unset($stuffs[$stuffId]);
$this->get('session')->set('stuffs', array_values($stuffs));
}
return $this->forward("FuzHomeBundle:Default:listStuffs");
}
/**
* Route : fuz_list_stuffs
*/
public function listStuffsAction()
{
$stuffs = $this->get('session')->get('stuffs');
$twigVars = array(
'stuffs' => $stuffs,
);
return $this->render('FuzHomeBundle:Default:listStuffs.html.twig', $twigVars);
}

L'index.html.twig

{# src/Fuz/HomeBundle/Resources/views/Default/index.html.twig #}
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
{# The form that will be posted asynchronously #}
<form id="formStuff">
{{ form_widget(formAddStuff) }}
<input type="button" id="add-stuff" value="Add stuff" />
</form>
<br/><br/>
{# The div that will contain the dynamic table #}
<div id="list-stuffs">
{% render path('fuz_list_stuffs') %}
</div>
{# When a click is made on the add-stuff button, we post the form #}
<script type="text/javascript">
$('#add-stuff').click(function() {
$.post('{{ path('fuz_add_stuff') }}',  $('#formStuff').serialize(), function(data) {
$('#list-stuffs').html(data);
});
});
</script>

La listStuffs.html.twig

{# listStuf

fs.html.twig #}
{% if stuffs | length == 0 %}
No stuff to display !
{% else %}
<table style="width: 50%">
{% for stuffId, stuff in stuffs %}
<tr>
<td>{{ stuff }}</td>
<td><a data-stuff-id="{{ stuffId }}" class="delete-stuff">Delete</a></td>
</tr>
{% endfor %}
</table>
<script type="text/javascript">
$('.delete-stuff').click(function() {
$.post('{{ path('fuz_del_stuff') }}', {'stuffId': $(this).data('stuff-id')}, function(data) {
$('#list-stuffs').html(data);
});
});
</script>
{% endif %}

Cela va vous donner quelques laid forme ressemblant à ceci :

Le point est : si vous actualisez votre page ou si vous ajoutez/supprimez des animaux, le même contrôleur sera appelée. Pas besoin de créer une certaine complexité de la logique ou de dupliquer du code.

---

Un { % % } exemple

La [% include %} tag vous permettent d'inclure un morceau de rameau code de la même façon que le include instruction fonctionne en PHP. Ce que cela signifie en gros : {% include %} vous donne une façon de réutiliser certains générique morceau de code partout dans votre application.

Nous restons avec notre fourre exemple : garder StuffEntity et StuffData mais de remplacer le suivant :

De routage :

fuz_home:
pattern:  /
defaults: { _controller: FuzHomeBundle:Default:index }
fuz_add_stuff:
pattern:  /add_stuff
defaults: { _controller: FuzHomeBundle:Default:addStuff }
fuz_del_stuff:
pattern:  /del_stuff
defaults: { _controller: FuzHomeBundle:Default:delStuff }

Contrôleurs :

public function indexAction()
{
//Initialize some stuffs, stored in the session instead of in a table for simplicity
if (!$this->get('session')->has('stuffs'))
{
$this->get('session')->set('stuffs', array());
}
//Create the form used to add a stuff
$form = $this->createForm(new StuffType(), new StuffData());
$stuffs = $this->get('session')->get('stuffs');
$twigVars = array(
'formAddStuff' => $form->createView(),
'stuffs' => $stuffs,
);
return $this->render('FuzHomeBundle:Default:index.html.twig', $twigVars);
}
/**
* Route : fuz_add_stuff
*/
public function addStuffAction()
{
$data = new StuffData();
$form = $this->createForm(new StuffType(), $data);
$form->bindRequest($this->getRequest());
if ($form->isValid())
{
$stuffs = $this->get('session')->get('stuffs');
$stuffs[] = $data->getStuff();
$this->get('session')->set('stuffs', $stuffs);
}
return $this->forward("FuzHomeBundle:Default:index");
}
/**
* Route : fuz_del_stuff
*/
public function delStuffAction()
{
$stuffId = $this->getRequest()->get('id');
$stuffs = $this->get('session')->get('stuffs');
if (array_key_exists($stuffId, $stuffs))
{
unset($stuffs[$stuffId]);
$this->get('session')->set('stuffs', array_values($stuffs));
}
return $this->forward("FuzHomeBundle:Default:index");
}

index.html.rameau :

{# src/Fuz/HomeBundle/Resources/views/Default/index.html.twig #}
<form action="{{ path('fuz_add_stuff') }}" method="post">
{{ form_widget(formAddStuff) }}
<input type="submit" value="Add stuff" />
</form>
<br/><br/>
{# Here we include our "generic" table with the stuff table as parameter #}
{%
include 'FuzHomeBundle:Default:genericTable.html.twig'
with {
'route': 'fuz_del_stuff',
'data' : stuffs,
}
%}

genericTable :

{# src/Fuz/HomeBundle/Resources/views/Default/genericTable.html.twig #}
{% if data | length == 0 %}
No data to display !
{% else %}
<table style="width: 50%">
{% for id, elem in data %}
<tr>
<td>{{ elem }}</td>
<td><a href="{{ path(route, {'id': id}) }}">Delete</a></td>
</tr>
{% endfor %}
</table>
{% endif %}

Comme vous pouvez le voir ici, il y a un seul contrôleur d'initialiser l'ensemble des éléments de la page (le formulaire et la table), ce n'est donc pas possible de faire des transactions asynchrones. Mais, vous pouvez inclure cette genericTable.html.twig fichier n'importe où dans votre application.

---

Conclusion

Vous allez utiliser {% render %} lorsque la vue à insérer peut être actualisée à l'aide d'une route standard ou lorsque la vue à insérer est totalement indépendante du contexte actuel.

Vous allez utiliser {% include %} lorsque vous devez utiliser un morceau de rameau code plusieurs fois dans votre application, mais vous devez initialiser la inclus affichage obligatoire du contexte dans la même action que le parent twig fichier.

OriginalL'auteur Alain Tiemblo