6.5. Vistas Parciales

Una vista parcial es una archivo .phtml, es decir una plantilla de vista, que puede ser impresa por otra plantilla de vista. Las vistas parciales permiten componer nuestra página con piezas y piezas reusables de vista imprimiendo la lógica en diferentes plantillas de vista.

Como un ejemplo simple del uso de una vista parcial vamos a imaginar que necesitamos imprimir una tabla con algunos productos. Cada producto tiene un ID, el nombre y el precio. Podemos usar una plantilla de vista parcial para imprimir una columna de una tabla varias veces.

Primero agregamos el método partialDemoAction() al controlador Index:

// An action that demonstrates the usage of partial views.
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]);
}

El método de acción de arriba prepara un arreglo con los productos que vamos a imprimir y los pasa a la plantilla de vista con la ayuda del contenedor de variables ViewModel.

Luego agregamos el archivo para la plantilla partial-demo.phtml:

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

<h1>Partial View Demo</h1>
<p>
    Below, the table of products is presented. It is rendered with the help of
    partial views.
</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>

En la plantilla de vista de arriba definimos las etiquetas para la tabla de productos (línea 10-22). En la línea 18 recorremos los elementos del arreglo de productos e imprimimos cada columna con el ayudante de vista Partial.

El primer argumento del ayudante de vista Partial es el nombre del archivo de plantilla de vista parcial ("application/index/table-row").

El segundo argumento del ayudante de vista Partial debe ser el arreglo de argumentos pasado a la plantilla de vista. Ellos serán accesibles de la misma manera que si los hubiéramos pasado con el contenedor de variables ViewModel.

Finalmente, creamos la plantilla de vista table-row.phtml que se usará como la plantilla de vista parcial:

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

En la plantilla de vista de arriba simplemente imprimimos una sola columna de la tabla.

Para ver la página web que resulta escribimos la URL "http://localhost/application/partial-demo" en la barra de navegación de nuestro navegador web. Deberíamos ver algo como lo que se muestra en la figura 6.5.

Figura 6.5. Las columnas de la tabla se imprimen con la vista parcial