6.5. Partial Views

A partial view is a .phtml view template file which can be rendered by another view template. Partial views allow to compose your page of pieces and reuse pieces of view rendering logic across different view templates.

For a simple example of partial view usage, let's imagine that we need to render a table of some products. Each product has the ID, the name and the price. We can use partial view template to render a single row of the table several times.

First, let's add the partialDemoAction() method to the Index controller:

// 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]);
}

The action method above just prepares an array of products for rendering and passes it to the view template with the help of the ViewModel variable container.

Next, add the partial-demo.phtml template file:

<?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>

In the view template above, we define the markup for the table of products (lines 10-22). In line 18, we walk through the items of the products array and render each row with the Partial view helper.

The first argument of the Partial view helper is the name of the partial view template file ("application/index/table-row").

The second argument of the Partial view helper should be an array of arguments passed to the view template. They will be accessible the same way as if you would pass them with the ViewModel variable container.

Finally, create the table-row.phtml view template, which will be used as the partial view template:

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

In the view template above, we just render a single row of the table.

To see the resulting web page, type "http://localhost/application/partial-demo" URL in your browser's navigation bar. You should see something like in figure 6.5.

Figure 6.5. Table rows are rendered by partial views