What is a view model in Magento 2? Explanation with a code example

by Shoaib Rehman | Feb 12, 2023 | Magento, Magento 2, Web development

Magento 2 View Model is a type of Magento 2 UI Component that helps to bind data to a template in a flexible and reusable way. The purpose of the View Model is to help developers structure the presentation layer in a way that separates data processing and data presentation. This separation of concerns allows for easier maintenance, easier testing, and helps to avoid the duplication of code.

A View Model is a PHP class that implements the Magento\Framework\View\Element\Block\ArgumentInterface interface. This interface requires the class to define a public function called toArray() which returns an array of data that can be used in a template. The data returned by the toArray() method is passed to a template as a set of variables.

A View Model is created in the following steps:

1. Create a PHP class that implements the Magento\Framework\View\Element\Block\ArgumentInterface interface.
2. Define the toArray() method in the class.
3. Register the View Model in the XML layout.

Here is a code example of a View Model in Magento 2:

<?php

namespace Vendor\Module\ViewModel;

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

class HelloWorld implements ArgumentInterface
{
    public function toArray()
    {
        return [
            'message' => 'Hello World!'
        ];
    }
}

In this example, we have created a View Model called HelloWorld that implements the Magento\Framework\View\Element\Block\ArgumentInterface interface. The toArray() method returns an array with a single key message and value Hello World!.

Next, we need to register the View Model in the XML layout. This is done by adding a viewModel tag to a block element in the XML layout:

<block class="Vendor\Module\Block\HelloWorld" name="hello_world">
    <arguments>
        <argument name="viewModel" xsi:type="object">Vendor\Module\ViewModel\HelloWorld</argument>
    </arguments>
</block>

In this example, we have added a viewModel argument to a block called hello_world with a class name of Vendor\Module\Block\HelloWorld. The viewModel argument is set to the Vendor\Module\ViewModel\HelloWorld class, which is the View Model we created earlier.

Finally, we can access the data in the View Model in a template using the following code:

<p><?php echo $block->getViewModel()->getMessage(); ?></p>

In this example, we use the $block variable to access the hello_world block and call the getViewModel() method to get the View Model. The getMessage() method is then called on the View Model to get the message value.

The use of View Models in Magento 2 provides many benefits for developers. Firstly, it allows for separation of concerns between data processing and data presentation. This separation makes the code easier to maintain and test as the data processing logic can be tested independently of the presentation logic. Secondly, it helps to avoid duplication of code. For example, if you have a piece of data that is used in multiple templates, you can create a single View Model to separate layers.