Magento 2 for Beginners

10 lessons

View Model in Magento 2

View Model in Magento 2

A view model is a class that allows you to pass data and additional functionality from a place that represents a business logic to a template. It also can provide data loaded from an entity, for example, a product. The view model allows developers to simplify templates and block classes by providing separate classes that are easier to test and maintain.

The View Model class can hold calculation logic, data lookups, object fetches and pass it directly to a template, so the template’s logic can be as simple as possible.

View Models usually located in the module’s directory called ViewModel. The location of view model classes, however, is not limited to a ViewModel directory. You can create as many view models as needed in order to provide a required set of separate classes with its own logic.

Lesson Overview

In this lesson we are going to learn the following:

  • What is a View Model?
  • How to use View Model?
  • When to use a View Model?

View Model Example

The concept of a view model is simple, and at the same time powerful. Let’s jump into the example to better understand the creation flow. In order to implement a view model, we have to create a PHP class in ViewModel directory.

class ProductViewModel
{
    private $resource;

    public function __construct(Resource $resource)
    {
        $this->resource = $resource;
    }

    public function getProductBySku(string $sku): ProductInterface
    {
         return $this->resource->load($sku, ‘sku’);
    }
}

The only requirement is that the ProductViewModel class must implement Magento\Framework\View\Element\Block\ArgumentInterface. Let's add it.

use Magento\Framework\View\Element\Block\ArgumentInterface;

class ProductViewModel implements ArgumentInterface
{
    //...
}

Once the view model class is created, we have to add it to a layout XML file. So that during layout rendering, it will find the view model class, instantiate it and add into the pool of a Block class dependencies.

A Layout XML file should be located in the view/frontend/layout directory of the module. In the Template and Layout rendering lesson, we’ve discussed different layout configuration areas. Make sure to check the lesson to better understand frontend and adminhtml directory locations for layout xml files.

Inside the layout file, we have to add new node in the and. The two attributes should be added to the node, the name of the view model variable and its type, the type should be always set to an object since we pass a class name that has to be initiated as a view model.

<?xml version="1.0"?>
<page>
    <body>
        <referenceBlock name="block.name">
            <arguments>
                <argument 
                    name="view_model" 
                    xsi:type="object">MageMastery\ViewModelExample\ViewModel\ProductViewModel</argument>
            </arguments>
        </referenceBlock>
    </body>
</page>

From the example above, a "block.name" can be a name of a block, where we want to add a View Model class.

Inside the node we have to provide the full class name of the view model. Remember, all objects that are injected to block arguments as view models should implement ArgumentInterface interface.

Finally, the template of the block to which we’ve added the view model class can get access to the view model. The view model object is passed as an argument of the Template object. It can be accessed via the getData() method by providing the name of the argument we’ve provided in the layout XML file.

/** @var ProductData $productData */
$productData = $block->getData(“view_model”);

After we’ve received an access to the view model, we can start using it in the template.

<h1><?= $productData->getProductBySku(‘sku’); ?></h1>

And as a result, the data provided from the view model class is rendered by a template.

View Model Rendering result

View Model Checklist

Let’s recap what we need to create and use a view model.

  1. Create a PHP class
  2. Add an ArgumentInterface
  3. Add a PHP Class into a layout xml
  4. Retrieve a View Model in a template
  5. Use View Model public methods

When to use a View Model?

A view model should be used every time you have to pass data from storage or the other object to a template for rendering. It includes calculation logic, data lookups, object fetches and so on.

A view model has to be used instead of a block, so your code will be less dependent on block changes in the Magento 2 framework.

Conclusion

A view model in Magento 2 is a powerful mechanism that allows us to represent and provide data ready for rendering in a template. It provides a simple tool that is recommended to use every time a UI customization should be added.