6.5. Vues partielles

Une vue partielle est un fichier de vue .phtml qui peut être rendu par une autre vue. Les vues partielles permettent de composer votre page par brique et de réutiliser chaque brique sur différents layout.

Pour un exemple simple d'utilisation de vue partielle, imaginons que nous devions afficher un tableau de certains produits. Chaque produit a un ID, un nom et un prix. Nous pouvons utiliser un modèle de vue partielle pour générer une seule ligne de la table à la fois.

Tout d'abord, ajoutons la méthode partialDemoAction() au contrôleur Index :

// Une action qui montre l'utilisation des vues partielles.
public function partialDemoAction() 
{
  $products = [
    [
      'id' => 1,
      'name' => 'Digital Camera',
      'price' => 99.95,
    ],
    [
      'id' => 2,
      'name' => 'Tripod',
      'price' => 29.95,
    ],
    [
      'id' => 3,
      'name' => 'Camera Case',
      'price' => 2.99,
    ],
    [
      'id' => 4,
      'name' => 'Batteries',
      'price' => 39.99,
    ],
    [
      'id' => 5,
      'name' => 'Charger',
      'price' => 29.99,
    ],
  ];
	
  return new ViewModel(['products' => $products]);
}

La méthode d'action ci-dessus prépare simplement un tableau de produits pour le rendu et le transmet à la vue à l'aide du conteneur de variables ViewModel.

Ensuite, ajoutez la vue partial-demo.phtml :

<?php
$this->headTitle('Partial View Demo');
?>

<h1>Partial View Demo</h1>
<p>
    Ci-dessous, le tableau des produits est affiché. Le rendu se fait à l'aide de
    vues partielles.
</p>
<table class="table table-striped table-hover">
  <tr>
    <th>ID</th>
    <th>Product</th>
    <th>Price</th>
  </tr>

  <?php 
    foreach ($this->products as $product) {
      echo $this->partial('application/index/table-row', ['product'=>$product]);
    }    
  ?>    
</table>

Dans la vue ci-dessus, nous définissons les balies du tableau des produits (lignes 10-22). A la ligne 18, nous parcourons les éléments du tableau de produits et restituons chaque ligne avec l'aide de vue Partial.

Le premier argument de l'aide de vue Partial est le nom du fichier de la vue partielle ("application/index/table-row").

Le deuxième argument de l'l'aide de vue Partial est un tableau d'arguments transmis à la vue. Ils seront accessibles de la même manière que si vous les passiez avec le conteneur de variable ViewModel.

Enfin, créez le fichier table-row.phtml qui sera utilisé comme vue partielle :

<tr>
  <td> <?= $this->product['id'] ?> </td>
  <td> <?= $this->product['name'] ?> </td>
  <td> <?= $this->product['price'] ?> </td>
</tr>

Dans la vue ci-dessus, nous n'effectuons le rendu que d'une seule ligne de la table.

Pour voir la page web qui en résulte, tapez l'URL "http://localhost/application/partial-demo" dans la barre de navigation de votre navigateur. Vous devriez voir quelque chose comme sur la figure 6.5.

Figure 6.5. Les lignes du tableau sont rendues par des vues partielles